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

 找回密码
 立即注册

QQ登录

只需一步，快速开始

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

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

[复制链接]
mseed
发表于 2011-12-30 10:17:54 | 显示全部楼层 |阅读模式 来自 中国–江苏–南京

现在全屏的半透明遮罩层在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键、全选、刷新、右键统统禁止掉，模拟真正的‘锁屏’：
  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 { visibility:hidden; 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. <script>
  15. (function(){
  16. // 获取对象
  17. var $ = function (id){
  18.   return document.getElementById(id);
  19. };
  20. // 遍历
  21. var each = function(a, b) {
  22.   for (var i = 0, len = a.length; i < len; i++) b(a[i], i);
  23. };
  24. // 事件绑定
  25. var bind = function (obj, type, fn) {
  26.   if (obj.attachEvent) {
  27.    obj['e' + type + fn] = fn;
  28.    obj[type + fn] = function(){obj['e' + type + fn](window.event);}
  29.    obj.attachEvent('on' + type, obj[type + fn]);
  30.   } else {
  31.    obj.addEventListener(type, fn, false);
  32.   };
  33. };

  35. // 移除事件
  36. var unbind = function (obj, type, fn) {
  37.   if (obj.detachEvent) {
  38.    try {
  39.     obj.detachEvent('on' + type, obj[type + fn]);
  40.     obj[type + fn] = null;
  41.    } catch(_) {};
  42.   } else {
  43.    obj.removeEventListener(type, fn, false);
  44.   };
  45. };

  47. // 阻止浏览器默认行为
  48. var stopDefault = function(e){
  49.   e.preventDefault ? e.preventDefault() : e.returnValue = false;
  50. };
  51. // 获取页面滚动条位置
  52. var getPage = function(){
  53.   var dd = document.documentElement,
  54.    db = document.body;
  55.   return {
  56.    left: Math.max(dd.scrollLeft, db.scrollLeft),
  57.    top: Math.max(dd.scrollTop, db.scrollTop)
  58.   };
  59. };

  61. // 锁屏
  62. var lock = {
  63.   show: function(){
  64.    $('pageOverlay').style.visibility = 'visible';
  65.    var p = getPage(),
  66.     left = p.left,
  67.     top = p.top;
  68.    
  69.    // 页面鼠标操作限制
  70.    this.mouse = function(evt){
  71.     var e = evt || window.event;
  72.     stopDefault(e);
  73.     scroll(left, top);
  74.    };
  75.    each(['DOMMouseScroll', 'mousewheel', 'scroll', 'contextmenu'], function(o, i) {
  76.      bind(document, o, lock.mouse);
  77.    });
  78.    // 屏蔽特定按键: F5, Ctrl + R, Ctrl + A, Tab, Up, Down
  79.    this.key = function(evt){
  80.     var e = evt || window.event,
  81.      key = e.keyCode;
  82.     if((key == 116) || (e.ctrlKey && key == 82) || (e.ctrlKey && key == 65) || (key == 9) || (key == 38) || (key == 40)) {
  83.      try{
  84.       e.keyCode = 0;
  85.      }catch(_){};
  86.      stopDefault(e);
  87.     };
  88.    };
  89.    bind(document, 'keydown', lock.key);
  90.   },
  91.   close: function(){
  92.    $('pageOverlay').style.visibility = 'hidden';
  93.    each(['DOMMouseScroll', 'mousewheel', 'scroll', 'contextmenu'], function(o, i) {
  94.     unbind(document, o, lock.mouse);
  95.    });
  96.    unbind(document, 'keydown', lock.key);
  97.   }
  98. };
  99. bind(window, 'load', function(){
  100.   $('btn_lock').onclick = function(){
  101.    lock.show();
  102.   };
  103.   $('pageOverlay').onclick = function(){
  104.    lock.close();
  105.   };
  106. });
  107. })();
  108. </script>
  109. </head>
  110. <body>
  111. <button id="btn_lock" style="position: absolute; left:50%; top:40%; ">开启锁屏</button>
  112. <ol id="test">
  113. <li>囧</li>
  114. <li>囧</li>
  115. <li>囧</li>
  116. <li>囧</li>
  117. <li>囧</li>
  118. <li>囧</li>
  119. <li>囧</li>
  120. <li>囧</li>
  121. <li>囧</li>
  122. <li>囧</li>
  123. <li>囧</li>
  124. <li>囧</li>
  125. <li>囧</li>
  126. <li>囧</li>
  127. <li>囧</li>
  128. <li>囧</li>
  129. <li>囧</li>
  130. <li>囧</li>
  131. <li>囧</li>
  132. <li>囧</li>
  133. <li>囧</li>
  134. <li>囧</li>
  135. <li>囧</li>
  136. <li>囧</li>
  137. <li>囧</li>
  138. <li>囧</li>
  139. <li>囧</li>
  140. <li>囧</li>
  141. <li>囧</li>
  142. <li>囧</li>
  143. <li>囧</li>
  144. <li>囧</li>
  145. <li>囧</li>
  146. <li>囧</li>
  147. <li>囧</li>
  148. <li>囧</li>
  149. <li>囧</li>
  150. <li>囧</li>
  151. <li>囧</li>
  152. <li>囧</li>
  153. <li>囧</li>
  154. <li>囧</li>
  155. <li>囧</li>
  156. <li>囧</li>
  157. <li>囧</li>
  158. <li>囧</li>
  159. <li>囧</li>
  160. <li>囧</li>
  161. <li>囧</li>
  162. <li>囧</li>
  163. <li>囧</li>
  164. <li>囧</li>
  165. <li>囧</li>
  166. <li>囧</li>
  167. <li>囧</li>
  168. <li>囧</li>
  169. <li>囧</li>
  170. <li>囧</li>
  171. <li>囧</li>
  172. <li>囧</li>
  173. <li>囧</li>
  174. <li>囧</li>
  175. <li>囧</li>
  176. <li>囧</li>
  177. <li>囧</li>
  178. <li>囧</li>
  179. <li>囧</li>
  180. <li>囧</li>
  181. <li>囧</li>
  182. <li>囧</li>
  183. <li>囧</li>
  184. <li>囧</li>
  185. <li>囧</li>
  186. <li>囧</li>
  187. <li>囧</li>
  188. <li>囧</li>
  189. <li>囧</li>
  190. <li>囧</li>
  191. <li>囧</li>
  192. <li>囧</li>
  193. </ol>
  194. <div id="pageOverlay"></div>
  195. </body>
  196. </html>
复制代码

网站, 这个问题, 这种方式, 的时候, 大多数

评分

参与人数 1金币 +1 收起 理由
光明使者 + 1 赞一个!

查看全部评分

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

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

使用道具 举报

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

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

关闭

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

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

GMT+8, 2024-12-19 11:08 , Processed in 0.054967 second(s), 13 queries , Redis On.

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

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