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

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

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

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. linux笔记八---------文件查找

    1.find文件查找指令 > find  目录  参数 参数值,参数 参数值.....    > find  /  -name  passwd   //从系统根目录开始递归查找name=p ...

  2. js控制滚动条平滑滚动到制定位置

    http://www.daixiaorui.com/read/92.html 滚动到顶部: $('.scroll_top').click(function(){$('html,body').anima ...

  3. Emule Xtreme Kid eD2K 设置

    设置udp和tcp端口: 测试结果必须为通过,若不通过, 1.请将主机ip丢入路由器DMZ区(设置将以上端口与本机ip地址绑定) 2.在windows防火墙中加入以上端口允许通行项 测试结果: 其它一 ...

  4. vpn分类[转]

    目前常用的几种移动拨号的VPN技术及优势和劣势1)                WEB SSL优点:1.使用简单:每个终端用户不需要安装客户端,使用起来方便,不需要维护终端用户,通过IE直接来访问. ...

  5. ASP.NET MVC中在Action获取提交的表单数据方法总结 (4种方法,转载备忘)

    有Index视图如下: 视图代码如下: <%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Mas ...

  6. 20145334赵文豪 《Java程序设计》第4周学习总结

    20145334赵文豪 <Java程序设计>第4周学习总结 教材学习内容总结 第六章知识点总结 1-继承共同行为:如果在程序设计上存在着重复,那就需要修改,可以吧相同的程序代码提升(pul ...

  7. 歐洲國家拓展其移動和IT服務業務

    中興德國子公司與JOIN簽訂了一項綜合託管服務合同,在該合同中,公司將全面負責為盧森堡和比利時的JOIN核心網路提供網路運營,點對點無線網路報告,新品發佈和維護,還負責故障檢查.維修.測試和軟體升級. ...

  8. json对象与json字符串对象格式

    var cStr = "{\"c\":\"{\\\"b\\\":\\\"000\\\",\\\"b2\\\&q ...

  9. mvc 扩展htmlhelper

    using System.Web.Mvc; namespace System.Web.Mvc{    public static class HtmlExtend    {        public ...

  10. 【C51】UART串口通信

    我们常需要单片机和其他模块进行通信,数据传输,常用的方式就是串口通信技术. 常用来 单片机<-->电脑,  单片机<-->单片机之间通信. 串行通信 versus 并行通信 并 ...