码迷,mamicode.com
首页 > Web开发 > 详细

js广告弹窗

时间:2016-09-26 16:21:32      阅读:183      评论:0      收藏:0      [点我收藏+]

标签:

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

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

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

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广告弹窗

标签:

原文地址:http://www.cnblogs.com/hegaiying/p/5909183.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!