js广告弹窗

Posted 2020-08-10

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

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

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

html代码部分：

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

CSS代码部分：

 1 <style type="text/css">
 2         *{margin: 0;padding: 0;}
 3         html{width: 100%;}
 4         body{width: 100%;position: relative;}
 5         #popup{width: 310px;height: 144px;
 6             background-color: yellowgreen;    position: fixed;
 7             left: 50%;top: 50%;margin-left: -155px;
 8             margin-top: -72px;display: none;}
 9         p{text-align: center;  line-height: 144px;}
10         span{
11             position: absolute;
12             top: 0;
13             right: 0;
14             width: 20px;
15             height: 20px;
16             background-color: red;
17             text-align: center;
18             cursor: pointer;
19             
20         }
21     </style>

JS代码部分：

 1 <script type="text/javascript">
 2         var Pop = document.getElementById("popup");
 3         var Dele = document.getElementById("dele");
 4         window.onload = function(){
 5 
 6             Pop.style.display = "block";
 7 
 8             Dele.onclick = function(){
 9                 Pop.style.display = "none";
10 
11                 setTimeout(function(){
12                     Pop.style.display = "block";
13                 },3000)
14             }
15         }
16     </script>

最终效果如下图所示：