<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>延时加载弹窗</title>
<style type="text/css">
body{
height: 2000px;
}
.box{
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background-color: #333;
opacity: 0.8;
display: none;
}
.pop{
position: absolute;
left: 50%;
top: 50%;
transform:translate(-50%, -50%);
background-color: #fff;
padding: 100px;
}
.close{
position: absolute;
right: 10px;
top: 10px;
width:30px;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 14px;
border: 1px solid #ededed;
padding: 5px;
}
</style>
</head>
<body>
<p>打开页面10秒后会有弹窗弹出</p>
<div class="box" id="box">
<div class="pop">
<p>定时弹窗 关闭后10秒再次弹出</p>
<span class="close" id="close">关闭</span>
</div>
</div>
</body>
<script type="text/javascript">
var bojbox=document.getElementById('box'); // 获取弹窗对象
window.onload=setTimeout(function(){bojbox.style.display='block'},5000); // 页面加载后5秒运行延时器 打开弹窗
document.getElementById('close').onclick=function(){ // 点击弹窗的关闭按钮后
bojbox.style.display = 'none'; //先关闭弹窗
setTimeout(pop,10000) //然后10秒后运行延时器 运行fun 函数 fun() 带括号就是运行函数的结果
}
function pop(){
bojbox.style.display ='block'
}
</script>
</html>
