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

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

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

HTML代码部分:

 <div id="popup">
<p>广告文字 广告文字 广告文字 </p>
<span id="dele">X</span>
</div>

CSS代码部分:

 <style type="text/css">
*{margin: 0;padding: 0;}
html{width: 100%;}
body{width: 100%;position: relative;}
#popup{width: 310px;height: 144px;
background-color: yellowgreen; position: fixed;
left: 50%;top: 50%;margin-left: -155px;
margin-top: -72px;display: none;}
p{text-align: center; line-height: 144px;}
span{
position: absolute;
top: 0;
right: 0;
width: 20px;
height: 20px;
background-color: red;
text-align: center;
cursor: pointer; }
</style>

JS代码部分:

 <script type="text/javascript">
var Pop = document.getElementById("popup");
var Dele = document.getElementById("dele");
window.onload = function(){ Pop.style.display = "block"; Dele.onclick = function(){
Pop.style.display = "none"; setTimeout(function(){
Pop.style.display = "block";
},3000)
}
}
</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. Eclipse tomcat先启动成功,然后再报超时原因之一

    eclipse ,tomcat及环境设置都没错,通过上网搜资料发现是因为本机浏览器设置了代理,导致elipse启动tomcat时也启用代理,最后在eclipse中取消代理,成功启动,如下设置: Pre ...

  2. 演示一个导致ora-01555错误的场景

    1创建一个undo表空间 2查看当前undo配置 3更该默认undo表空间 4确认更改的配置 5创建一张测试表 6模拟批量操作 7 查询2分钟前的数据 从这里可以到当查询2分钟前的数据时候,系统报出O ...

  3. Jackson转换对象为json的时候报java.lang.stackoverflowerror

    无论在将一个对象转为json字符串的时候采用何种算法,如果你的对象的属性的类型不是基本类型或对应的引用类型,转换应该都不会就此结束,那么有一种方式可以导致这种转换陷入无限循环:将某个对象的属性设为对象 ...

  4. 在 Django 模板中遍历复杂数据结构的关键是句点字符

    在 Django 模板中遍历复杂数据结构的关键是句点字符 ( . ). 实例二 mysit/templates/myhtml2.html修改如下 <!DOCTYPE html> <h ...

  5. Oracle中有个tkprof来格式化oracle的trace文件

    1.MySQL日志文件系统的组成2.慢查询日志3.慢查询日志演示long_query_time : 设定慢查询的阀值,超出次设定值的SQL即被记录到慢查询日志,缺省值为10sslow_query_lo ...

  6. PHP的排序函数的总结

    Sort     破坏索引 升序    值排序 Rsort    破坏索引 降序    值排序 Asort    保持索引 升序     值排序 Arsort   保持索引 降序     值排序 Ks ...

  7. Codeforces Round #375 (Div. 2) A B C D F

    A 数轴上有三个人要到一个点去过年 使三个人走路距离的和最小  让两边的人都走到中间那个点即可 B 给出一个字符串 其中有_ ( ) 三种字符和英文字母 连续的英文字母是一个单词 括号对中不会套括号对 ...

  8. py操作mysql

    1.操作mysql的标准流程 import pymysql conn = pymysql.connect(host = "127.0.0.1", port = 3306,user ...

  9. http://blog.csdn.net/ClementAD/article/category/6217187/2

    http://blog.csdn.net/ClementAD/article/category/6217187/2

  10. linux添加ip、路由相关命令

    1- Linux添加永久路由vi /etc/sysconfig/network-scripts/route-eth1ADDRESS0=192.168.10.0NETMASK0=255.255.255. ...