lightBox 简易的全屏透明遮罩解决方法

步入正题：
现在全屏的半透明遮罩层在web2.0网站应用非常广泛了，绝大多数遮罩是通过计算页面大小，然后覆盖一个与页面同等大小的层实现，如腾讯qzone, wordpress后台。这种方式本来无可非议，但是在页面很长的时候在IE8下会失效（国外资料的解释是与机器显卡相关），有些完美情节的同学遇到这个问题后就抓破了头，无奈之下甚至想让IE8强制使用IE7的方式解析他的作品。其实我们有一个更好的方法，咱们用CSS去解决它！
还记得“position:fixed”吗？它是css2的一个新增的属性，他可以让一个元素静止在页面上，拖动滚动条也不会动，如Qzone顶部固定的导航栏就是这样实现的。同样我们也可以用一个100%高宽的层覆盖浏览器视口，这样就可以实现全屏遮罩了。不用再计算页面的大小，调整浏览器大小的时候也不要去动态修改尺寸了。

lock page

#pageOverlay { position:fixed; top:0; left:0; z-index:1987; width:100%; height:100%; background:#000; filter:alpha(opacity=70); opacity:0.7; }

  1. 囧
  2. 囧
  3. 囧
  4. 囧
  5. 囧
  6. 囧
  7. 囧
  8. 囧
  9. 囧
  10. 囧
  11. 囧
  12. 囧
  13. 囧
  14. 囧
  15. 囧
  16. 囧
  17. 囧
  18. 囧
  19. 囧
  20. 囧
  21. 囧
  22. 囧
  23. 囧
  24. 囧
  25. 囧
  26. 囧
  27. 囧
  28. 囧
  29. 囧
  30. 囧
  31. 囧
  32. 囧
  33. 囧
  34. 囧
  35. 囧
  36. 囧
  37. 囧
  38. 囧
  39. 囧
  40. 囧
  41. 囧
  42. 囧
  43. 囧
  44. 囧
  45. 囧
  46. 囧
  47. 囧
  48. 囧
  49. 囧
  50. 囧
  51. 囧
  52. 囧
  53. 囧
  54. 囧
  55. 囧
  56. 囧
  57. 囧
  58. 囧
  59. 囧
  60. 囧
  61. 囧
  62. 囧
  63. 囧
  64. 囧
  65. 囧
  66. 囧
  67. 囧
  68. 囧
  69. 囧
  70. 囧
  71. 囧
  72. 囧
  73. 囧
  74. 囧
  75. 囧
  76. 囧
  77. 囧
  78. 囧
  79. 囧
  80. 囧

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

可是有一个头疼的问题，IE6不支持“position:fixed”，咱们只能通过js动态的修改它的TOP值以模拟静止定位，拖动滚动条的时候遮罩成肯定会抖动，因为每改变一次IE会重新渲染一次。但是微软却给我们提供了一个非常有趣的特性，如果给html或者body标签设置一个静止定位的背景图片，层在拖动滚动条的时候就不会抖动了，几乎完美的模拟了“position:fixed”。我在实际项目中发现这个特性他还能触发其他的特异功能，以后再说明。
为了省事，咱们针对IE6用万恶expression在CSS中写点脚本，拖动滚动条的时候重新定位我们的遮罩层。传说中expression是非常耗性能的，可是咱们的expression几乎没有损耗，有兴趣的同学可以深入研究下expression。

lock page

#pageOverlay { position:fixed; top:0; left:0; z-index:1987; width:100%; height:100%; background:#000; filter:alpha(opacity=70); opacity:0.7; }
/*IE6 fixed*/
* html { background:url(*) fixed; }
* html body { margin:0; height:100%; }
* html #pageOverlay { position: absolute; left: expression(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth); top: expression(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight); }

  1. 囧
  2. 囧
  3. 囧
  4. 囧
  5. 囧
  6. 囧
  7. 囧
  8. 囧
  9. 囧
  10. 囧
  11. 囧
  12. 囧
  13. 囧
  14. 囧
  15. 囧
  16. 囧
  17. 囧
  18. 囧
  19. 囧
  20. 囧
  21. 囧
  22. 囧
  23. 囧
  24. 囧
  25. 囧
  26. 囧
  27. 囧
  28. 囧
  29. 囧
  30. 囧
  31. 囧
  32. 囧
  33. 囧
  34. 囧
  35. 囧
  36. 囧
  37. 囧
  38. 囧
  39. 囧
  40. 囧
  41. 囧
  42. 囧
  43. 囧
  44. 囧
  45. 囧
  46. 囧
  47. 囧
  48. 囧
  49. 囧
  50. 囧
  51. 囧
  52. 囧
  53. 囧
  54. 囧
  55. 囧
  56. 囧
  57. 囧
  58. 囧
  59. 囧
  60. 囧
  61. 囧
  62. 囧
  63. 囧
  64. 囧
  65. 囧
  66. 囧
  67. 囧
  68. 囧
  69. 囧
  70. 囧
  71. 囧
  72. 囧
  73. 囧
  74. 囧
  75. 囧
  76. 囧
  77. 囧
  78. 囧
  79. 囧
  80. 囧

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

好了，兼容IE6这个大头娃娃后，咱们的锁屏遮罩已经通杀主流浏览器了，但是呢用js写效果的同学们总是非常的蛋疼，总想折腾点什么来，咱们就再添加一点脚本，让锁屏的时候后可以中断用户操作，把滚动条、滚轮、tab键、全选、刷新、右键统统禁止掉，模拟真正的‘锁屏'：

lock page

#pageOverlay { visibility:hidden; position:fixed; top:0; left:0; z-index:1987; width:100%; height:100%; background:#000; filter:alpha(opacity=70); opacity:0.7; }
/*IE6 fixed*/
* html { background:url(*) fixed; }
* html body { margin:0; height:100%; }
* html #pageOverlay { position: absolute; left: expression(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth); top: expression(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight); }

(function(){
// 获取对象
var $ = function (id){
return document.getElementById(id);
};
// 遍历
var each = function(a, b) {
for (var i = 0, len = a.length; i

开启锁屏

  1. 囧
  2. 囧
  3. 囧
  4. 囧
  5. 囧
  6. 囧
  7. 囧
  8. 囧
  9. 囧
  10. 囧
  11. 囧
  12. 囧
  13. 囧
  14. 囧
  15. 囧
  16. 囧
  17. 囧
  18. 囧
  19. 囧
  20. 囧
  21. 囧
  22. 囧
  23. 囧
  24. 囧
  25. 囧
  26. 囧
  27. 囧
  28. 囧
  29. 囧
  30. 囧
  31. 囧
  32. 囧
  33. 囧
  34. 囧
  35. 囧
  36. 囧
  37. 囧
  38. 囧
  39. 囧
  40. 囧
  41. 囧
  42. 囧
  43. 囧
  44. 囧
  45. 囧
  46. 囧
  47. 囧
  48. 囧
  49. 囧
  50. 囧
  51. 囧
  52. 囧
  53. 囧
  54. 囧
  55. 囧
  56. 囧
  57. 囧
  58. 囧
  59. 囧
  60. 囧
  61. 囧
  62. 囧
  63. 囧
  64. 囧
  65. 囧
  66. 囧
  67. 囧
  68. 囧
  69. 囧
  70. 囧
  71. 囧
  72. 囧
  73. 囧
  74. 囧
  75. 囧
  76. 囧
  77. 囧
  78. 囧
  79. 囧
  80. 囧

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • 非jQuery实现照片散落桌子上，单击放大的LightBox效果

    非jQuery实现照片散落桌子上，单击放大的LightBox效果

    效果图如下 Demo地址http://xueduany.github.io/KitJs/KitJs/demo/Lightbox-Gallery/demo.html 实现原理很简单,基本的html如下 复制代码 代码如下: <div id="gallery">             <div class="item">                 <a class="kitLightBox" href="

  • 30个最佳jQuery Lightbox效果插件分享

    30个最佳jQuery Lightbox效果插件分享

    Web开发者们模仿 Lightbox 开发了各种各样的图片浏览插件,有基于 jQuery 的,有基于 Prototype 的,也有使用原生 JavaScript 写的.今天,本文要与大家分享的是30个最佳 jQuery Lightbox 效果插件. 1.jQuery LightBox 在线示例 2.Lightbox2 在线示例 3.FancyBox 在线示例 4.LightWindow v2.0 在线示例 5.Colorbox Lightbox Plugin 在线示例 6.FaceBox 在线示

  • 如何让你的Lightbox支持滚轮缩放及Base64图片

    在做文章类型的web页时,经常会遇到要点开看大图的需求,LightBox2则是在众多产品中比较优秀的一款Jquery插件.配置就不细说了,今天我主要要分享的是:如何在点开大图后,可以通过鼠标滚轮来缩放图片, 1.修改Lightbox源码使支持滚轮缩放 支持鼠标滚轮主要就是把弹出后的框整个绑定上mousewheel事件,打开lightbox.js,找到Lightbox.prototype.build = function() {...}这一段,可以在这里(lightbox初始化的时候)把想要的滚轮

  • WordPress 照片lightbox效果的运用几点

    如果你的网站上已经使用了lightbox这类效果,或者下面的几点运用经验你也会觉合适(前提是使用JQuery实现). 1. 指定哪些条件下运用Lightbox效果 在网站的js文件中添加如下语句: 复制代码 代码如下: $(function() { $('a[@rel*=lightbox]').lightBox(); $('.gallery a').lightBox(); }); 这样就决定只有在链接中添加"rel=lightbox"后,该链接才会出现lightbox效果:第二行中的'

  • jQuery Lightbox 图片展示插件使用说明

    一.信息原作者:Benjamin Arthur Lupton当前版本:v1.3.7最终版发布日期:2009年4月25日项目地址:http://jquery.com/plugins/project/jquerylightbox_bal翻译编辑:张鑫旭(zhangxinxu) 二.安装在您页面的头部head中嵌入如下如下代码链接必须的JavaScript文件. <script type="text/javascript" src="js/jquery-1.2.6.pack.

  • 国外Lightbox v2.03.3 最新版 下载

    下面是官方的描述,好多网站实现的图片展示都用的这个效果,非常不错的效果,简单易用Support It doesn't work at all. The image opens up in a new page. What's wrong?  This is commonly caused by a conflict between scripts. Check your body tag and look for an onload attribute. Example: <body onloa

  • Mootools 图片展示插件(lightbox,ImageMenu)收集集合

    Mootools 图片展示插件(lightbox,ImageMenu)收集集合

    1.MultiBox 一个lightbox支持的内容格式包括:图片,Flash,视频,mp3,html. 主页:http://www.phatfusion.net/multibox/ 下载:http://www.phatfusion.net/multibox/multibox.zip 示例:http://www.phatfusion.net/multibox/ 2.ImageMenu 一个图片展示控件.当鼠标移到某一张图片时将展开整张图片. 主页:http://www.phatfusion.ne

  • sina的lightbox效果。

    使用时,只需要在A标签处加上rel="lightbox"即可.e.g: <A href=http://image2.sina.com.cn/dy/other/74/U1571P1T74D1184F1625DT20060618123137.jpg rel=lightbox><IMG src=http://image2.sina.com.cn/dy/other/74/U1571P1T74D1184F1625DT20060618123137.jpg height="

  • lightBox 简易的全屏透明遮罩解决方法

    步入正题: 现在全屏的半透明遮罩层在web2.0网站应用非常广泛了,绝大多数遮罩是通过计算页面大小,然后覆盖一个与页面同等大小的层实现,如腾讯qzone, wordpress后台.这种方式本来无可非议,但是在页面很长的时候在IE8下会失效(国外资料的解释是与机器显卡相关),有些完美情节的同学遇到这个问题后就抓破了头,无奈之下甚至想让IE8强制使用IE7的方式解析他的作品.其实我们有一个更好的方法,咱们用CSS去解决它! 还记得"position:fixed"吗?它是css2的一个新增的

  • 基于JavaScript实现全屏透明遮罩div层锁屏效果

    废话不多说了,直接给大家写js代码了,代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <tit

  • Android编程使WebView支持HTML5 Video全屏播放的解决方法

    Android编程使WebView支持HTML5 Video全屏播放的解决方法

    本文实例讲述了Android编程使WebView支持HTML5 Video全屏播放的解决方法.分享给大家供大家参考,具体如下: 1)需要在AndroidManifest.xml文件中声明需要使用HardwareAccelerate, 可以细化到Activity级别,如果不需要的View可以声明不要用加速,但是需要在代码中做,具体如下: a. 如果要声明整个应用都要加速: 复制代码 代码如下: <application ... android:hardwareAccelerated ="tr

  • layer弹出层中H5播放器全屏出错的解决方法

    layer弹出层中H5播放器全屏出错的解决方法

    1. 在layer弹窗组件中 如果使用了flash播放器,全屏是正常的 但若使用了HTML5的播放器,全屏失效 举个栗子 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js

  • Android 4.0 设置全屏修改的解决方法

    最近在做一个平板的应用,底部的BACK HOME 还有电池WIFI的那一条STATUS_BAR设置全屏后怎么也去不掉,查找资料后,发现一个比较好的方法,在此分享 第一种方式(程序代码): 在OnCreate里添加一行语句 复制代码 代码如下: getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LOW_PROFILE); 在setContentView之前哦. 过时的一个方法: 复制代码 代码如下: getWi

  • Android Splash界面白屏、黑屏问题的解决方法

    前言 我相信很多Android开发同学都遇到过这样的需求: 1.实现一个Splash界面,界面上有应用相关的背景图片和一个开始按钮.  2.点击按钮之后进入主页,以后用户再打开应用就不显示这个Splash界面了. 也相信很多同学都遇到了这样的困惑:  •第二次进入应用,尽管你在Splash界面已经直接跳转到首页了,但是还是有个白屏或者黑屏或者带ActionBar的白屏闪现一下. 如果你也遇到这个问题,那就继续阅读这篇文章,我带大家去分析和解决这个问题. 解决方案 这里我们先给出解决方案,然后再具

  • Android ActionBarActivity设置全屏无标题实现方法总结

    Android  ActionBarActivity设置全屏无标题实现方法总结 前言: 新建的Activity继承自ActionBarActivity,设置全屏无标题本来很简单的事,但是没想到app竟然无缘无故的挂,要么就是白屏一片,要么就是黑屏.坑了我一个多小时!!! 原因是ActionBarActivity设置theme的时候只能使用v7包里的Theme.AppCompat***开头的主题,因此设置全屏无标题的话需要自定义个style: <style name="ActionBarFu

  • Android程序启动时出现黑屏问题的解决方法

    本文实例讲述了Android程序启动时出现黑屏问题的解决方法.分享给大家供大家参考,具体如下: 关于黑屏: 默认的情况下,程序启动时,会有一个黑屏的时期,原因是,首个activity会加载一些数据,比如初始化列表数据.向服务器发送请求获取数据等等. 去除方法: 1.在style里面添加一个style: <style name="ContentOverlay"parent="@android:style/Theme.Light"> <itemname

  • Android ActionBarActivity设置全屏无标题的方法总结

    Android ActionBarActivity设置全屏无标题的方法总结 新建的Activity继承自ActionBarActivity,设置全屏无标题本来很简单的事,但是没想到app竟然无缘无故的挂,要么就是白屏一片,要么就是黑屏.坑了我一个多小时!!! 原因是ActionBarActivity设置theme的时候只能使用v7包里的Theme.AppCompat***开头的主题,因此设置全屏无标题的话需要自定义个style: <style name="ActionBarFullScre

  • Android  ActionBarActivity设置全屏无标题实现方法总结

    Android  ActionBarActivity设置全屏无标题实现方法总结 前言: 新建的Activity继承自ActionBarActivity,设置全屏无标题本来很简单的事,但是没想到app竟然无缘无故的挂,要么就是白屏一片,要么就是黑屏.坑了我一个多小时!!! 原因是ActionBarActivity设置theme的时候只能使用v7包里的Theme.AppCompat***开头的主题,因此设置全屏无标题的话需要自定义个style: <style name="ActionBarFu

随机推荐