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>

最终效果如下图所示：