简易的全屏透明遮罩(lightBox)
来源:planeart 发布时间:2010-06-09 20:56:00
前不久有个正要毕业的网友给我发邮件,他毕业设计需要实现锁屏的效果,但是他没有能看懂我之前发布的对话框源码,他问能不能把锁屏相关代码说明下,我当时说过两天就发。由于最近比较忙,我现在才想起来,但愿现在此文还来得及。
步入正题:
现在全屏的半透明遮罩层在web2.0网站应用非常广泛了,绝大多数遮罩是通过计算页面大小,然后覆盖一个与页面同等大小的层实现,如腾讯qzone, wordpress后台。这种方式本来无可非议,但是在页面很长的时候在IE8下会失效(国外资料的解释是与机器显卡相关),有些完美情节的同学遇到这个问题后就抓破了头,无奈之下甚至想让IE8强制使用IE7的方式解析他的作品。其实我们有一个更好的方法,咱们用CSS去解决它!
还记得“position:fixed”吗?它是css2的一个新增的属性,他可以让一个元素静止在页面上,拖动滚动条也不会动,如Qzone顶部固定的导航栏就是这样实现的。同样我们也可以用一个100%高宽的层覆盖浏览器视口,这样就可以实现全屏遮罩了,不用再计算页面的大小,调整浏览器大小的时候也不要去动态修改尺寸了。
可是有一个头疼的问题,IE6不支持“position:fixed”,咱们只能通过js动态的修改它的TOP值以模拟静止定位,拖动滚动条的时候遮罩成肯定会抖动,因为每改变一次IE会重新渲染一次。但是微软却给我们提供了一个非常有趣的特性,如果给html或者body标签设置一个静止定位的背景图片,层在拖动滚动条的时候就不会抖动了,几乎完美的模拟了“position:fixed”。我在实际项目中发现这个特性他还能触发其他的特异功能,以后再说明。
为了省事,咱们针对IE6用万恶expression在CSS中写点脚本,拖动滚动条的时候重新定位我们的遮罩层。传说中expression是非常耗性能的,可是咱们的expression几乎没有损耗,有兴趣的同学可以深入研究下expression。
好了,兼容IE6这个大头娃娃后,咱们的锁屏遮罩已经通杀主流浏览器了,但是呢用js写效果的同学们总是非常的蛋疼,总想折腾点什么来,咱们就再添加一点脚本,让锁屏的时候后可以中断用户操作,把滚动条、滚轮、tab键、全选、刷新、右键统统禁止掉,模拟真正的‘锁屏’:
猜你喜欢
- 如何用我的国际域名做虚拟域名?config.asp<%Domain_URL = "intels.net&
- Event是Javascript中的重要事件,event代表事件的状态,专门负责对事件的处理,它的属性和方法能帮助我们完成很多和用户交互的操
- 欣赏上一篇:用画为5.12地震受灾同胞们祈福 今年我们的祖国多灾多难 雪灾的阴影还没散去又发生了地震。中国插画 * 举办5.12地震祈幅绘画活
- zy3287 问:<script src="js.js?id=999" type="text/javas
- 众所周知道,IE向来是我们在制作网页时最难搞定的对手。但又迫于其用户群数量之多,我们不得不想法设法搞定它。下面,将介绍的将是利用其特点而被发
- 经常看见MOP上有人贴那种动态的图片,就是把一个字符串作为参数传给一个 * 页,就会生成一个带有这个字符串的图片,这个叫做文字水印。像什么原
- iUI、jQTouch、WPTouch、PhoneGap、XUI、iWebkit、Rhodes、gwt-mobile…当我们已经开始惊叹 w
- 和数据库打交道要频繁地用到SQL语句,除非你是全部用控件绑定的方式,但采用控件绑定的方式存在着灵活性差、效率低、功能弱等等缺点。因此,大多数
- 总结了5个关于css布局的常见问题,并附有解决方法,供参考。float的3像素问题及解决办法当使用float浮动容器后,在IE6下会产生3p
- 综述:本文讨论了VBScript和 JScript之间的区别,以及它们的使用场合。推荐:Vbscript5.5中文语言参考手册chm格式下载
- <'% '************************************************
- 问:怎样解决MySQL 5.0.16的乱码问题?答:MySQL 5.0.16的乱码问题可以用下面的方法解决:1.设置phpMyAdminLa
- 1.建立Recordset对象Dim objMyRstSet objMyRst=Server.CreateObject(&ldquo
- 首先来看,ASP读取ACCESS数据库。代码如下:<% @language="VBScript"&nbs
- 【名称】Abs【类别】数学函数【原形】Abs(number)【参数】必选的。Number参数是一个任何有效的数值型表达式【返回值】同numb
- 如何制作一个弹出式的调查窗口?执行下面这段ASP代码: <% &n
- 在了解了XHTML 2的进展之后,我们再来看看X/HTML 5 的进展。X/HTML 5酷在什么地方章节元素的构想X/HTML 5引入新的元
- SQL Server TEXT、NTEXT字段拆分的问题引用的内容:SET NOCOUNT ON CREATE 
- 引伸阅读解读absolute与relativeposition:relative/absolute无法冲破的等级定位一直是WEB标准应用中的
- 之前在《首都机场的点烟器》中分析了一个软件系统所处的状态并且列举了不同的状态所需要的展示给用户的各类信息,我们先简单回顾一下:要设计一个软件