收藏本站帮助飘仙建站网侵权投诉
切换到宽版

 找回密码
 立即注册

QQ登录

只需一步，快速开始

飘仙建站论坛»论坛 › 源码cms建站学习交流区 › 网页制作设计交流 › 简易的全屏透明遮罩(lightBox)
返回列表 发新帖
查看: 2052|回复: 1

[教程] 简易的全屏透明遮罩(lightBox)

[复制链接]
mseed
发表于 2012-3-30 23:15:01 | 显示全部楼层 |阅读模式 来自 中国–江苏–南京
现在全屏的半透明遮罩层在web2.0网站应用非常广泛了，绝大多数遮罩是通过计算页面大小，然后覆盖一个与页面同等大小的层实现，如腾讯qzone, wordpress后台。这种方式本来无可非议，但是在页面很长的时候在IE8下会失效（国外资料的解释是与机器显卡相关），有些完美情节的同学遇到这个问题后就抓破了头，无奈之下甚至想让IE8强制使用IE7的方式解析他的作品。其实我们有一个更好的方法，咱们用CSS去解决它！
还记得“position:fixed”吗？它是css2的一个新增的属性，他可以让一个元素静止在页面上，拖动滚动条也不会动，如Qzone顶部固定的导航栏就是这样实现的。同样我们也可以用一个100%高宽的层覆盖浏览器视口，这样就可以实现全屏遮罩了，不用再计算页面的大小，调整浏览器大小的时候也不要去动态修改尺寸了。
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>lock page</title>
  6. <meta name="author" content="www.planeart.cn" />
  7. <style>
  8. #pageOverlay { position:fixed; top:0; left:0; z-index:1987; width:100%; height:100%; background:#000; filter:alpha(opacity=70); opacity:0.7; }
  9. </style>
  10. </head>
  11. <body>
  12. <ol id="test" onclick="document.getElementById('pageOverlay').style.visibility = 'visible'">
  13. <li>囧</li>
  14. <li>囧</li>
  15. <li>囧</li>
  16. <li>囧</li>
  17. <li>囧</li>
  18. <li>囧</li>
  19. <li>囧</li>
  20. <li>囧</li>
  21. <li>囧</li>
  22. <li>囧</li>
  23. <li>囧</li>
  24. <li>囧</li>
  25. <li>囧</li>
  26. <li>囧</li>
  27. <li>囧</li>
  28. <li>囧</li>
  29. <li>囧</li>
  30. <li>囧</li>
  31. <li>囧</li>
  32. <li>囧</li>
  33. <li>囧</li>
  34. <li>囧</li>
  35. <li>囧</li>
  36. <li>囧</li>
  37. <li>囧</li>
  38. <li>囧</li>
  39. <li>囧</li>
  40. <li>囧</li>
  41. <li>囧</li>
  42. <li>囧</li>
  43. <li>囧</li>
  44. <li>囧</li>
  45. <li>囧</li>
  46. <li>囧</li>
  47. <li>囧</li>
  48. <li>囧</li>
  49. <li>囧</li>
  50. <li>囧</li>
  51. <li>囧</li>
  52. <li>囧</li>
  53. <li>囧</li>
  54. <li>囧</li>
  55. <li>囧</li>
  56. <li>囧</li>
  57. <li>囧</li>
  58. <li>囧</li>
  59. <li>囧</li>
  60. <li>囧</li>
  61. <li>囧</li>
  62. <li>囧</li>
  63. <li>囧</li>
  64. <li>囧</li>
  65. <li>囧</li>
  66. <li>囧</li>
  67. <li>囧</li>
  68. <li>囧</li>
  69. <li>囧</li>
  70. <li>囧</li>
  71. <li>囧</li>
  72. <li>囧</li>
  73. <li>囧</li>
  74. <li>囧</li>
  75. <li>囧</li>
  76. <li>囧</li>
  77. <li>囧</li>
  78. <li>囧</li>
  79. <li>囧</li>
  80. <li>囧</li>
  81. <li>囧</li>
  82. <li>囧</li>
  83. <li>囧</li>
  84. <li>囧</li>
  85. <li>囧</li>
  86. <li>囧</li>
  87. <li>囧</li>
  88. <li>囧</li>
  89. <li>囧</li>
  90. <li>囧</li>
  91. <li>囧</li>
  92. <li>囧</li>
  93. </ol>
  94. <div id="pageOverlay" onclick="this.style.visibility = 'hidden'"></div>
  95. </body>
  96. </html>
复制代码
可是有一个头疼的问题，IE6不支持“position:fixed”，咱们只能通过js动态的修改它的TOP值以模拟静止定位，拖动滚动条的时候遮罩成肯定会抖动，因为每改变一次IE会重新渲染一次。但是微软却给我们提供了一个非常有趣的特性，如果给html或者body标签设置一个静止定位的背景图片，层在拖动滚动条的时候就不会抖动了，几乎完美的模拟了“position:fixed”。我在实际项目中发现这个特性他还能触发其他的特异功能，以后再说明。
为了省事，咱们针对IE6用万恶expression在CSS中写点脚本，拖动滚动条的时候重新定位我们的遮罩层。传说中expression是非常耗性能的，可是咱们的expression几乎没有损耗，有兴趣的同学可以深入研究下expression。
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>lock page</title>
  6. <meta name="author" content="www.planeart.cn" />
  7. <style>
  8. #pageOverlay { position:fixed; top:0; left:0; z-index:1987; width:100%; height:100%; background:#000; filter:alpha(opacity=70); opacity:0.7; }
  9. /*IE6 fixed*/
  10. * html { background:url(*) fixed; }
  11. * html body { margin:0; height:100%; }
  12. * html #pageOverlay { position: absolute; left: expression(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth); top: expression(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight); }
  13. </style>
  14. </head>
  15. <body>
  16. <ol id="test" onclick="document.getElementById('pageOverlay').style.visibility = 'visible'">
  17. <li>囧</li>
  18. <li>囧</li>
  19. <li>囧</li>
  20. <li>囧</li>
  21. <li>囧</li>
  22. <li>囧</li>
  23. <li>囧</li>
  24. <li>囧</li>
  25. <li>囧</li>
  26. <li>囧</li>
  27. <li>囧</li>
  28. <li>囧</li>
  29. <li>囧</li>
  30. <li>囧</li>
  31. <li>囧</li>
  32. <li>囧</li>
  33. <li>囧</li>
  34. <li>囧</li>
  35. <li>囧</li>
  36. <li>囧</li>
  37. <li>囧</li>
  38. <li>囧</li>
  39. <li>囧</li>
  40. <li>囧</li>
  41. <li>囧</li>
  42. <li>囧</li>
  43. <li>囧</li>
  44. <li>囧</li>
  45. <li>囧</li>
  46. <li>囧</li>
  47. <li>囧</li>
  48. <li>囧</li>
  49. <li>囧</li>
  50. <li>囧</li>
  51. <li>囧</li>
  52. <li>囧</li>
  53. <li>囧</li>
  54. <li>囧</li>
  55. <li>囧</li>
  56. <li>囧</li>
  57. <li>囧</li>
  58. <li>囧</li>
  59. <li>囧</li>
  60. <li>囧</li>
  61. <li>囧</li>
  62. <li>囧</li>
  63. <li>囧</li>
  64. <li>囧</li>
  65. <li>囧</li>
  66. <li>囧</li>
  67. <li>囧</li>
  68. <li>囧</li>
  69. <li>囧</li>
  70. <li>囧</li>
  71. <li>囧</li>
  72. <li>囧</li>
  73. <li>囧</li>
  74. <li>囧</li>
  75. <li>囧</li>
  76. <li>囧</li>
  77. <li>囧</li>
  78. <li>囧</li>
  79. <li>囧</li>
  80. <li>囧</li>
  81. <li>囧</li>
  82. <li>囧</li>
  83. <li>囧</li>
  84. <li>囧</li>
  85. <li>囧</li>
  86. <li>囧</li>
  87. <li>囧</li>
  88. <li>囧</li>
  89. <li>囧</li>
  90. <li>囧</li>
  91. <li>囧</li>
  92. <li>囧</li>
  93. <li>囧</li>
  94. <li>囧</li>
  95. <li>囧</li>
  96. <li>囧</li>
  97. </ol>
  98. <div id="pageOverlay" onclick="this.style.visibility = 'hidden'"></div>
  99. </body>
  100. </html>
复制代码
好了，兼容IE6这个大头娃娃后，咱们的锁屏遮罩已经通杀主流浏览器了，但是呢用js写效果的同学们总是非常的蛋疼，总想折腾点什么来，咱们就再添加一点脚本，让锁屏的时候后可以中断用户操作，把滚动条、滚轮、tab键、全选、刷新、右键统统禁止掉，模拟真正的‘锁屏’：
网站

发帖求助前要善用【论坛搜索】功能，那里可能会有你要找的答案；

如何回报帮助你解决问题的坛友，好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分，做一个热心并受欢迎的人！
回复

使用道具 举报

A网站建设
发表于 2012-3-31 12:01:02 | 显示全部楼层 来自 中国–北京–北京
抢个沙发坐坐~~~~~~~~~

发帖求助前要善用【论坛搜索】功能，那里可能会有你要找的答案；

如何回报帮助你解决问题的坛友，好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分，做一个热心并受欢迎的人！
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则 需要先绑定手机号

关闭

站长推荐上一条 /1 下一条

QQ|侵权投诉|广告报价|手机版|小黑屋|西部数码代理|飘仙建站论坛 ( 豫ICP备2022021143号-1 )

GMT+8, 2024-12-23 13:00 , Processed in 0.047821 second(s), 11 queries , Redis On.

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表