思路
1.创建一个按钮,点击弹出弹窗
2.建立一个弹窗页面 固定定位 默认隐藏
3.将弹窗内容放在弹窗页面的中间
4.js将事件绑定按钮,点击后让弹窗页面显示
5.js事件绑定span标签,点击后让弹窗页面消失
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹窗</title>
<link href="../css/弹窗.css" type="text/css" rel="stylesheet">
</head>
<body>
<!--打开弹窗按钮-->
<button id="btn">打开弹窗</button>
<!--弹窗-->
<div id="myModal">
<!--弹窗头部-->
<div class="modal">
<div class="modal-header">
<p>危险警告</p>
<span class="close">×</span>
</div>
<!--弹窗文本-->
<div class="modal-content">
<p>您将进入一个不安全的页面</p>
</div>
<!--弹窗底部-->
<div class="modal-footer">
</div>
</div>
<script src="../js/弹窗.js">
</script>
</body>
</html>
#myModal{
display: none;
position: fixed;
z-index:1;
left:0;
top:0;
width: 100%;
height:100%;
overflow: auto;
background:rgba(0,0,0,0.5);
}
#myModal .modal{
width: 500px;
height:300px;
position: relative;
top:50%;
left:50%;
margin-top: -150px;
margin-left: -250px;
animation:animate 1s;
}
.modal .modal-header{
height:50px;
background:white;
color: #000;
line-height:50px;
border-bottom: 1px solid #000000;
}
.modal .modal-header p{
display: inline-block;
margin:0;
position: absolute;
left: 20px;
}
.modal .modal-header .close{
position: absolute;
right:20px;
font-size: 20px;
cursor:pointer;
}
.modal .modal-content{
background: white;
height:200px;
text-align: center;
line-height: 200px;
}
.modal .modal-content p{
margin:0;
}
.modal .modal-footer{
position: relative;
height:50px;
background: white;
}
/*添加动画*/
@keyframes animate{
from{top:0;opacity:0}
to{top:50%;opacity:1}
}
window.onload=function () {
//获取弹窗按钮
var btn=document.getElementById("btn");
var close=document.getElementsByClassName("close")[0];
var myModal=document.getElementById("myModal");
//按钮绑定事件
btn.onclick=function () {
//获取弹窗
myModal.style.display="block";
}
close.onclick=function () {
myModal.style.display="none";
}
//用户点击其他地方关闭弹窗
window.onclick=function (event) {
if(event.target ==myModal){
myModal.style.display="none";
}
}
}