Simple full-screen transparent mask (lightBox)

Author：Eve Cole Update Time：2010-06-09 17:08:28

Not long ago, a netizen who was about to graduate sent me an email. His graduation project needed to achieve a lock screen effect, but he could not understand the source code of the dialog box I posted before. He asked if he could explain the lock screen related code. I said I would post it in two days. Since I have been very busy recently, I only remembered it now, and I hope it is not too late to write this article.

Getting to the point:

Nowadays, full-screen semi-transparent mask layers are 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 and wordpress backend. 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, and there is no need to dynamically modify the size when resizing the browser.

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 every time it changes IE will re-render again. 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" ". In actual projects, I found that this feature can also trigger other special functions, which I will explain later.

In order to save trouble, we use the evil 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.

Okay, after being compatible with the big-headed doll IE6, our lock screen mask has been adopted by mainstream browsers. However, students who use js to write effects are always very frustrated and always want to toss in something, so we will Add a little script to interrupt user operations when the screen is locked, disable the scroll bar, wheel, tab key, select all, refresh, and right-click to simulate a real 'lock screen':

Run code box
<!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> <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> <script> (function(){ // Get the object var $ = function (id){ return document.getElementById(id); }; // Traverse var each = function(a, b) { for (var i = 0, len = a.length; i < len; i++) b(a[i], i); }; // Event binding 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); }; }; // Remove event 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); }; }; // Prevent the browser's default behavior var stopDefault = function(e){ e.preventDefault ? e.preventDefault() : e.returnValue = false; }; // Get the page scroll bar Position 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) }; }; // Lock screen var lock = { show: function(){ $('pageOverlay').style.visibility = 'visible'; var p = getPage(), left = p.left, top = p.top; // Page mouse operation restrictions 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); }); // Block specific keys: 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> </head> <body> <button id="btn_lock" style="position: absolute; left:50%; top: 40%; ">Enable lock screen</button> <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> li> <li>囧</li> </ol> <div id="pageOverlay"></div> </body> </html>
[Ctrl+A Select All Tips: You can modify part of the code first and then press Run]

Original text: http://www.planeart.cn/?p=792