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

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

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

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广告弹窗的更多相关文章

  1. 原生JS实现各种经典网页特效——Banner图滚动、选项卡切换、广告弹窗等

    在制作网页过程中,我们可能会遇到各种常用的经典网页特效,比如Banner图片滚动.选项卡循环播放.右下角广告弹窗.评论提交展示.选项动态增删.剪刀石头布小游戏等等等...是不是感觉都见到过这些场景.那 ...

  2. jQuery实现广告弹窗

    首先设置一个固定的窗口位于右下角,效果如下: 代码: jQuery实现广告弹窗.html 之后将该窗口初始设为隐藏,通过代码实现3秒自动显示,5秒自动隐藏,其效果如下: <!DOCTYPE ht ...

  3. js右下角弹窗代码(实测好用)

    实测好用的js右下角弹窗代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  4. jquery.cookie广告弹窗点击关闭后一天弹一次

    jquery.cookie广告弹窗点击关闭后一天弹一次 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...

  5. JQ广告弹窗&随机抽奖————JQ

    1.JQ广告弹窗 <div id="flo"> <img src="image.jpeg"> </div> <scri ...

  6. js解决弹窗问题实现班级跳转DIV示例

    js解决弹窗问题实现班级跳转DIV 1.js代码如下: <%--实现班级跳转DIV--%>  <div id="displayClassDiv" style=&q ...

  7. js写弹窗

    1.先来看弹窗的模样 点击“弹出窗口”后会弹出下面窗口 2.下面是实现弹出窗口的代码,其中引入的jquery一般自己有,没有的话可以从网上下载.tanchuang.js和tanchuang.css写在 ...

  8. 一段简单的顶部JS广告

    一段简单的顶部JS广告 <SCRIPT LANGUAGE="JavaScript"> ; ; images = new Array; images[] = new Im ...

  9. 原生Js_实现广告弹窗

    广告样式当页面加载后5s刷新在右下角 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

随机推荐

  1. ASP.NET发布后,功能不响应

    题记:稀奇古怪的错误,往往是由低级脑残错误产生的 ASP.NET网站,本地调试一切正常.部署到服务器后,结果登陆按钮就卡住了,点击就是没反应. 浏览器显示Internal Server Error 5 ...

  2. 使用UEditor 的时候,ajax注意使用同步的方法

    使用UEditor 的时候,ajax注意使用同步的方法去读取后台数据,然后填写到前端的文本域当中.

  3. redis虚拟机模拟集群,节点,增加多端口命令

    Redis启动多端口,运行多实例 使用redis在同一台机器上,启用多个端口,实现多个实例,完成集群的模拟实现. 启动多实例 redis默认启动端口为6379,我们可以使用 --port 来指定多个端 ...

  4. redis发布订阅

    命令 : redis-cli打开一个客户端 Redis Psubscribe 命令订阅一个或多个符合给定模式的频道. 每个模式以 * 作为匹配符,比如 it* 匹配所有以 it 开头的频道( it.n ...

  5. 第一章 开始编写第一个jsp

    第一章 搭好框架,需要tomcat服务器和jdk. JSP是Java Server Page的缩写,现在先让我们编写一个简单的jsp页面,看看jsp究竟能干什么? <%=new java.uti ...

  6. 导出excel时,以form方式提交json数据

    今天在写项目时写到一个excel的导出,开始想用ajax请求后台后导出,但发现ajax会有返回值,而且ajax无法直接输出文件,而后台的excel导出方法已经封装好,不方便修改. 就改用了提交的方式f ...

  7. bzoj4514: [Sdoi2016]数字配对--费用流

    看了一眼题目&数据范围,觉得应该是带下界的费用流 原来想拆点变成二分图,能配对的连边,跑二分图,可行性未知 后来看到另外一种解法.. 符合匹配要求的数要满足:质因子的个数相差为1,且两者可整除 ...

  8. 2016HUAS暑假集训题1 J - 迷宫问题

    Description 定义一个二维数组: int maze[5][5] = { 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, ...

  9. Linux服务器中木马(肉鸡)手工清除方法

    由于自己也碰到过这种情况,刚好看到这篇文章,先转载过来.的确蛮有用的哦. 首先剧透一下后门木马如下: (当然这是事后平静下来后慢慢搜出来的,那个时候喝着咖啡感觉像个自由人) 木马名称 Linux.Ba ...

  10. 分享一个基于HTML5实现的视频播放器【转】

    什么是hivideo? 最近一段时间在使用PhoneGap开发一个App应用,App需要播放视频,本想直接使用html5的video,但使用它在全屏播放时不支持横屏播放,只能放弃.最终决定还是自己封装 ...