首页 > 代码库 > js广告弹窗
js广告弹窗
生活中我们经常遇到一些烦人的广告页面，比方说弹窗，悬浮等等各种广告。有的同事甚至都下一个屏蔽广告插件到浏览器上。这样就防止了广告的干扰。
但是我们学前端的必须是要知道广告弹窗这个做的过程，甚至是它的原理。
下面是我自己做的一个小案例，希望能够帮助到大家。当然，有不妥当的地方，还望多多指教。谢谢！
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>
最终效果如下图所示：
js广告弹窗
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。