本文实例为大家分享了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