这是我参与「第四届青训营 」笔记创作活动的第21天
大家好，这里是前端萌新John。今天想给大家分享的是前端简单的弹窗教学。
众所周知，前端的网页制作不仅要画风设计精美，而且对与用户的交互程度要求较高，点击弹窗是一个比较简单、常见的交互方式。
前端可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。
警告框：经常用于确保用户可以得到某些信息。
当警告框出现后，用户需要点击确定按钮才能继续进行操作。
<body>
<input type="button" onclick="myFunction()" value="显示警告框">
</body>
<script>
function myFunction(){
alert("你好，我是一个警告框！");
}
</script>
确认框： 当确认框弹出时，用户可以点击 "确认" 或者 "取消" 来确定用户操作。
当你点击 "确认", 确认框返回 true， 如果点击 "取消", 确认框返回 false。
<script>
function myFunction() {
var x;
var r = confirm("按下按钮!");
if (r == true) {
x = "你按下了\"确定\"按钮!";
}
else {
x = "你按下了\"取消\"按钮!";
}
document.getElementById("demo").innerHTML = x;
}
</script>
确认框会有两个按钮可以点击，一个是确定，一个是取消，你可以通过函数来设置点击不同选项触发的事件。
提示框：提示框经常用于提示用户在进入页面前输入某个值。
当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。
如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。
<script>
var person = prompt("请输入你的名字", "John");
if (person != null && person != "") {
document.getElementById("demo").innerHTML = person + "加油！终会学有所成！";
}
</script>
输入框里默认是空值，可以人为设置初始值。
最后一种方法就是通过结合上一次分享中的元素隐藏和展现来实现，需要提前设置好遮罩层和交互内容。
<button id="btn">点击创建项目</button>
<div class="bg" id="bg">
<!-- 交互框 -->
<div class="create">
<div class="header"></div>
<div id="projname">
<p>
请输入项目名称：
</p>
<p>
<input type="text" class="textinput" id="projectname">
</p>
<p>
<button type="button" class="btn" id="createbtn" onclick="ensure()">确认创建</button>
<button type="button" class="btn" onclick="back()">返回</button>
</p>
</div>
</div>
</div>
<script>
document.getElementById('bg').style.display='none';
var btn=document.getElementById('btn');
btn.onclick=function(){
document.getElementById('bg').style.display='';
}
</script>
再通过元素展现和绑定事件来实现交互。
这样就实现了简单的交互功能啦！大家快去试试吧！
好啦！今天的分享就到这里啦！我们下一篇文章再见！
