延时器弹窗 

<!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>

 

posted @ 2017-11-21 16:40  Jinsuo  阅读(321)  评论(0)    收藏  举报