标签：
生活中我们经常遇到一些烦人的广告页面，比方说弹窗，悬浮等等各种广告。有的同事甚至都下一个屏蔽广告插件到浏览器上。这样就防止了广告的干扰。
但是我们学前端的必须是要知道广告弹窗这个做的过程，甚至是它的原理。
下面是我自己做的一个小案例，希望能够帮助到大家。当然，有不妥当的地方，还望多多指教。谢谢！
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>
最终效果如下图所示：
标签：
原文地址：http://www.cnblogs.com/hegaiying/p/5909183.html
