lightBox simple full-screen transparent mask solution_javascript skills

Let’s get to the point:
Full-screen semi-transparent mask layers are now widely used in web2.0 websites. Most masks are implemented by calculating the page size and then covering it with a layer of the same size as the page, such as Tencent qzone , wordpress background. This method is understandable, but it will fail under IE8 when the page is very long (the explanation from foreign information is that it is related to the machine's graphics card). Some students with perfect plots scratched their heads after encountering this problem. In desperation, they even I want IE8 to be forced to use the method of IE7 to parse his works. Actually we have a better way, let’s use CSS to solve it!
Remember “position:fixed”? It is a new attribute of CSS2. It can make an element stay still on the page and not move when dragging the scroll bar. For example, the fixed navigation bar at the top of Qzone is implemented in this way. Similarly, we can also use a layer with 100% height and width to cover the browser viewport, so that full-screen masking can be achieved. There is no need to calculate the size of the page anymore, and there is no need to dynamically modify the size when resizing the browser.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>lock page</title> <meta name="author" content="www.planeart.cn"> <style> #pageOverlay { position:fixed; top:0; left:0; z-index:1987; width:100%; height:100%; background:#000; filter:alpha(opacity=70); opacity:0.7; } </style> <ol id="test" onclick="document.getElementById('pageOverlay').style.visibility = 'visible'"> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> </ol> <div id="pageOverlay" onclick="this.style.visibility = 'hidden'"></div>
[Ctrl A select all Note: If you need to introduce external Js, you need to refresh to execute ]

But there is a headache. IE6 does not support "position:fixed". We can only dynamically modify its TOP value through js to simulate static positioning. When dragging the scroll bar, the mask will definitely shake because IE will re-render every time it is changed. But Microsoft has provided us with a very interesting feature. If you set a statically positioned background image for the html or body tag, the layer will not shake when the scroll bar is dragged, almost perfectly simulating "position:fixed" ". I found in actual projects that this feature can also trigger other special functions, which will be explained later.
To save trouble, we use Wanhe expression to write some scripts in CSS for IE6, and reposition our mask layer when dragging the scroll bar. Legend has it that expression is very performance-intensive, but our expression has almost no loss. Interested students can study expression in depth.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>lock page</title> <meta name="author" content="www.planeart.cn"> <style> #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); } </style> <ol id="test" onclick="document.getElementById('pageOverlay').style.visibility = 'visible'"> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> </ol> <div id="pageOverlay" onclick="this.style.visibility = 'hidden'"></div>
[Ctrl A select all Note: If you need to introduce external Js, you need to refresh to execute ]

Okay, after being compatible with the big-headed doll of IE6, our lock screen mask has been used by mainstream browsers. However, students who use js to write effects are always very frustrated and always want to toss in something. Let's add a little more script so that user operations can be interrupted when the screen is locked, and the scroll bar, wheel, tab key, select all, refresh, and right-click are all disabled, simulating a real 'lock screen':

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>lock page</title> <meta name="author" content="www.planeart.cn"> <style> #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); } </style> <button id="btn_lock" style="position: absolute; left:50%; top:40%; "> </button>Enable lock screen<ol id="test"> <li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧<li> </li>囧</ol> <div id="pageOverlay"> </div>
[Ctrl A select all Note: If you need to introduce external Js, you need to refresh to execute

]<script> (function(){ // 获取对象 var $ = function (id){ return document.getElementById(id); }; // 遍历 var each = function(a, b) { for (var i = 0, len = a.length; i < len; i++) b(a[i], i); }; // 事件绑定 var bind = function (obj, type, fn) { if (obj.attachEvent) { obj['e' + type + fn] = fn; obj[type + fn] = function(){obj['e' + type + fn](window.event);} obj.attachEvent('on' + type, obj[type + fn]); } else { obj.addEventListener(type, fn, false); }; }; // 移除事件 var unbind = function (obj, type, fn) { if (obj.detachEvent) { try { obj.detachEvent('on' + type, obj[type + fn]); obj[type + fn] = null; } catch(_) {}; } else { obj.removeEventListener(type, fn, false); }; }; // 阻止浏览器默认行为 var stopDefault = function(e){ e.preventDefault ? e.preventDefault() : e.returnValue = false; }; // 获取页面滚动条位置 var getPage = function(){ var dd = document.documentElement, db = document.body; return { left: Math.max(dd.scrollLeft, db.scrollLeft), top: Math.max(dd.scrollTop, db.scrollTop) }; }; // 锁屏 var lock = { show: function(){ $('pageOverlay').style.visibility = 'visible'; var p = getPage(), left = p.left, top = p.top; // 页面鼠标操作限制 this.mouse = function(evt){ var e = evt || window.event; stopDefault(e); scroll(left, top); }; each(['DOMMouseScroll', 'mousewheel', 'scroll', 'contextmenu'], function(o, i) { bind(document, o, lock.mouse); }); // 屏蔽特定按键: F5, Ctrl + R, Ctrl + A, Tab, Up, Down this.key = function(evt){ var e = evt || window.event, key = e.keyCode; if((key == 116) || (e.ctrlKey && key == 82) || (e.ctrlKey && key == 65) || (key == 9) || (key == 38) || (key == 40)) { try{ e.keyCode = 0; }catch(_){}; stopDefault(e); }; }; bind(document, 'keydown', lock.key); }, close: function(){ $('pageOverlay').style.visibility = 'hidden'; each(['DOMMouseScroll', 'mousewheel', 'scroll', 'contextmenu'], function(o, i) { unbind(document, o, lock.mouse); }); unbind(document, 'keydown', lock.key); } }; bind(window, 'load', function(){ $('btn_lock').onclick = function(){ lock.show(); }; $('pageOverlay').onclick = function(){ lock.close(); }; }); })(); </script>