正文

js实现弹框效果

︶ㄣ米米素材网 メ
米米素材网V管理员 / 阅读
0715

这篇文章主要为大家详细介绍了js实现弹框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js实现弹框效果的具体代码，供大家参考，具体内容如下

利用display来控制弹窗的现实和隐藏

?
1
2
3
4
5
6
7
8
9
10
<!-- 弹出层 -->
<div id="popLayer"></div> <!--黑色蒙版 -->
<div id="popBox">
  <div class="close">
   X
  </div>
  <div>
   <!-- 内容 -->
 </div>
</div>

js：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//点击关闭按钮
var close = document.querySelector(".close")
close.onclick = function () {
 console.log("点击")
 var popBox = document.getElementById("popBox");
 var popLayer = document.getElementById("popLayer");
 popBox.style.display = "none";
 popLayer.style.display = "none";
}
 
 
//需要显示时调用
var popLayer = document.getElementById("popLayer");
popBox.style.display = "block";
popLayer.style.display = "block";

CSS:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
/* 弹出层 */
#popLayer {
 display: none;
 background-color: #000;
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 z-index: 10;
 opacity: 0.6;
}
 
/*弹出层*/
#popBox {
 display: none;
 background-color: #FFFFFF;
 z-index: 11;
 width: 220px;
 height: 300px;
 position: fixed;
 top: 0;
 right: 0;
 left: 0;
 bottom: 0;
 margin: auto;
}
 
/*关闭按钮*/
#popBox .close {
 width: 20px;
 height: 20px;
 border-radius: 50%;
 position: absolute;
 border: 1px solid #fff;
 color: #fff;
 text-align: center;
 line-height: 20px;
 right: 8px;
 top: 8px;
 z-index: 50;
}
 
#popBox .close a {
 text-decoration: none;
 color: #2D2C3B;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持米米素材网。

原文链接：https://blog.csdn.net/youngKing0615/article/details/114867921