js实现一个div弹窗附带定时关闭

109 阅读 0 评论 72 点赞

我是靠谱客的博主明亮黑猫，这篇文章主要介绍js实现一个div弹窗附带定时关闭，现在分享给大家，希望可以做个参考。

因为js自带的alert弹窗太丑且需要用户点击后才能关闭，所以用js+div实现一个弹窗,且附带定时关闭功能

代码如下：

style样式：

复制代码

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
 /*背景层*/
#popLayer {
display: none;
background-color: #B3B3B3;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity=80); /* 只支持IE6、7、8、9 */
}
/*弹出层*/
#popBox {
display: none;
/*background-color: #FFFFFF;*/
z-index: 11;
width: 250px;
height: 180px;
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
border-radius: 5px;
}
#popBox .close {
text-align: right;
margin-right: 5px;
background-color: #F8F8F8;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
/*关闭按钮*/
#popBox .close a {
text-decoration: none;
color: #2D2C3B;
}

页面div代码，因为我设置一秒后自动关闭，所以注释了关闭按钮

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="popLayer"></div>
<div id="popBox" style="width: 50%;height: 50%;">
<%--<div class="close">--%>
<%--<a href="javascript:void(0)" οnclick="closeBox()">关闭</a>--%>
<%--</div>--%>
<div class="content" id="content" style="text-align: center;background-color: #ffffff;">
<div style="width: 100%;height: 15%;margin-bottom: 20px;">
<h2 style="margin-top:30px;margin-bottom: 0px;font-family: 微软雅黑;font-size: 48px;">提示信息</h2>
</div>
<span id="span_id" style="font-family: 微软雅黑;font-size: 40px;">这里是提示信息</span>
<div style="font-family: 微软雅黑;font-size: 20px;color: black;margin-top: 10px;">
(一秒后自动关闭)
</div>
</div>
</div>

复制代码

1
js代码

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 /*点击弹出按钮*/
function popBox(msg1) {
//获取背景div
var popBox = document.getElementById("popBox");
//获取显示的div框
var popLayer = document.getElementById("popLayer");
var content = document.getElementById("content");
//设置显示内容
document.getElementById("span_id").innerHTML = ""+msg1+"";
//设置定时关闭时间 此处为毫秒1200=1.2s
setTimeout("document.getElementById('popLayer').style.display='none'",1200);
setTimeout("document.getElementById('popBox').style.display='none'",1200);
//设置为可见
popBox.style.display = "block";
popLayer.style.display = "block";
};
/*点击关闭按钮*/
function closeBox() {
var popBox = document.getElementById("popBox");
var popLayer = document.getElementById("popLayer");
popBox.style.display = "none";
popLayer.style.display = "none";
}