js广告弹窗

    生活中我们经常遇到一些烦人的广告页面，比方说弹窗，悬浮等等各种广告。有的同事甚至都下一个屏蔽广告插件到浏览器上。这样就防止了广告的干扰。

但是我们学前端的必须是要知道广告弹窗这个做的过程，甚至是它的原理。

下面是我自己做的一个小案例，希望能够帮助到大家。当然，有不妥当的地方，还望多多指教。谢谢！

HTML代码部分：

<div id="popup">
        <p>广告文字 广告文字 广告文字 </p>
        <span id="dele">X</span>
    </div>

CSS代码部分：

<style type="text/css">
        *{margin: 0;padding: 0;}
        html{width: 100%;}
        body{width: 100%;position: relative;}
        #popup{width: 310px;height: 144px;
            background-color: yellowgreen;    position: fixed;
            left: 50%;top: 50%;margin-left: -155px;
            margin-top: -72px;display: none;}
        p{text-align: center;  line-height: 144px;}
        span{
            position: absolute;
            top: 0;
            right: 0;
            width: 20px;
            height: 20px;
            background-color: red;
            text-align: center;
            cursor: pointer;
            
        }
    </style>

JS代码部分：

<script type="text/javascript">
        var Pop = document.getElementById("popup");
        var Dele = document.getElementById("dele");
        window.onload = function(){

            Pop.style.display = "block";

            Dele.onclick = function(){
                Pop.style.display = "none";

                setTimeout(function(){
                    Pop.style.display = "block";
                },3000)
            }
        }
    </script>

最终效果如下图所示：