1.代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>Title</title>
<style>
.cover{
position: fixed;
/*首先将位置固定住*/
top:0;
right:0;
bottom:0;
left:0;
/*上下左右设置都为0*/
background-color: rgba(0,0,0,0.2);
z-index:99;
/*指定一个元素的堆叠顺序,数值越大,表示在越上边*/
}
.modal{
width:700px;
height:400px;
position: absolute;
top:50%;
left:50%;
margin-left: -350px;
margin-top: -200px;
background-color: white;
z-index: 100;
/*将x的位置移动*/
}
.close{
float: right;
/*在这里将x移动到右上角*/
margin-right: 15px;
margin-top: 10px;
font-size: 16px;
}
.hide{
display: none;
/*表示不显示*/
}
</style>
</head>
<body>
<button id="b1">点我弹出</button>
<div class="cover hide" ></div>
<!--这个标签通过设置CSS样式,将button及下层的东西盖住,比如注册登录窗口的弹出就需要这个-->
<!--hide表示不显示这个div标签,注意这个hide写在class里边-->
<div class="modal hide" >
<span class="close" id="s1">×</span>
<!--×表示x的意思,也可以直接写x-->
</div>
<script>
// 思考如何实现,在点击弹出按钮之后,弹出两个标签
//首先,找标签,注意这个地方是通过id处理的
var b1Ele=document.getElementById('b1')
//其次,处理事件,单击button之后,找到类属性,移除类列表中的隐藏属性
b1Ele.onclick=function (ev) {
document.getElementsByClassName('cover')[0].classList.remove('hide');
document.getElementsByClassName('modal')[0].classList.remove('hide');
//移除样式
}
var s1Ele=document.getElementById('s1')
//其次,处理事件,单击button之后,找到类属性,添加类列表中的隐藏属性
s1Ele.onclick=function (ev) {
document.getElementsByClassName('cover')[0].classList.add('hide');
document.getElementsByClassName('modal')[0].classList.add('hide');
//移除样式
}
</script>
</body>
</html>
<!--目的就是:一点添加,一点关闭,这样的操作-->
代码效果:
(1)运行
(2)点击"点我弹出",结果如下图
(3)再点击x,回到界面(1)的效果,可以反复尝试