Step into the business:
Now full screen of the translucent mask layer in the web2.0 site is very extensive application, the vast majority of masks are calculated by the size of the page, and then cover a page equivalent to the size of the implementation of the layer, such as Tencent Qzone, WordPress backstage. This way would have been justifiable, but in the page is very long time under the IE8 will be ineffective (foreign data interpretation is related to the machine graphics card), some perfect plot of the classmate encountered this problem after scratching the head, but even want to let IE8 forced to use IE7 way to parse his works. In fact, we have a better way, we use CSS to solve it!
Do you Remember "position:fixed"? It is a new property of Css2, he can keep an element still on the page, drag the scroll bar will not move, such as the Qzone the top fixed navigation bar is achieved. We can also use a 100%-wide layer to cover the browser viewport, so that the Full-screen mask can be achieved. Do not need to calculate the size of the page, adjust the size of the browser do not change the size of the dynamic.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title>lock page</title> <meta name=" author content= "www.planeart.cn"/> tyle> #pageOverlay {position:fixed; top:0; left:0; z-index:1987; width:100%; height:100%; background: #000; filter:al PHA (OPACITY=70); opacity:0.7; } </style> </pead> <body> <ol id= "test" onclick= document.getElementById (' Pageoverlay '). style.visibility = ' visible ' > <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassed & Lt;/li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing & Lt;/li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing & lt;/lI> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> </</li> <li> embarrassing Li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> </</li> <li> embarrassing Li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> </</li> <li> embarrassing Li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> </</li> <li> embarrassing Li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> </</li> <li> embarrassing Li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> </</li> <li> embarrassing Li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> </</li> <li> embarrassing Li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> </</li> <li> embarrassing Li> <li> embarrassing </li> <li> </li> <li> embarrassing </li> <li> <li </li> <li> embarrassing </li> <li> embarrassing </li> > Embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li > Embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li > Embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li > Embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> </ ol> <div id= "Pageoverlay" onclick= "this.style.visibility = ' hidden '" ></div> </body> </ptml >
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
But there is a headache, IE6 does not support the "position:fixed", we can only dynamically modify its top value to simulate static positioning, drag the scroll bar when the mask will certainly jitter, because each change in IE will be again rendered once. But Microsoft has provided us with a very interesting feature, if the HTML or body tag to set a static positioning of the background picture, the layer is dragging the scroll bar will not jitter, almost perfect simulation of the "position:fixed." I found this feature in a real-world project and he can trigger other psychic powers, and then explain it later.
For the sake of convenience, we IE6 with the evil expression in the CSS write point script, drag the scroll bar to reposition our mask layer. Legend expression is very performance-consuming, but our expression almost no loss, interested students can delve into the expression.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title>lock page</title> <meta name=" author content= "www.planeart.cn"/> tyle> #pageOverlay {position:fixed; top:0; left:0; z-index:1987; width:100%; height:100%; background: #000; filter:al PHA (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-thi S.offsetwidth); Top:expression (Documentelement.scrolltop + documentelement.clientheight-this.offsetheight); } </style> </pead> <body> <ol id= "test" onclick= document.getElementById (' Pageoverlay '). style.visibility = ' visible ' "> <li> </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> & Lt;li> </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> & Lt;li> </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> & Lt;li> </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> & Lt;li> </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> & Lt;li> </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> & Lt;li> </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> & Lt;li> </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> & Lt;li> </li> <li> embarrassed </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> </li > <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> </li > <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> </li > <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> </li > <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> </li > <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> </li > <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> </li > <li> embarrassing </li> <li> embarrassing </li> <li> </li> </ol> <div id= "Pageoverlay" onclic k= "this.style.visibility = ' hidden '" ></div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Well, with this big Head doll compatible with IE6, our lock screen mask has already killed the mainstream browser, but the students with JS write effect is always very egg pain, always want to toss something, we will add a little script, so that when the lock screen can be interrupted after the user operation, the scroll bar, Wheel, tab, select All, Refresh, Right button is all banned, simulate the real ' lock screen ':
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title>lock page</title> <meta name=" author content= "www.planeart.cn"/> tyle> #pageOverlay {visibility:hidden; position:fixed; top:0; left:0; z-index:1987; width:100%; height:100%; Backgro und: #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-thi S.offsetwidth); Top:expression (Documentelement.scrolltop + documentelement.clientheight-this.offsetheight); } </style> <script> (function () {//Get 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 + F n]); Obj[type + fn] = null; catch (_) {}; else {obj.removeeventlistener (type, FN, false); }; }; Block browser default behavior var stopdefault = function (e) {e.preventdefault? E.preventdefault (): E.returnvalue = false; }; Gets 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 action Limit 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); }); Mask 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> </pead> <body> <button id= "Btn_lock" > Open lock Screen </button> <ol id= "Test" > < Li> </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> < Li> </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> < Li> </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> < Li> </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> < Li> </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> < Li> </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> < Li> </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> <li> embarrassing </li> </ol> <div id= "Pageoverlay" ;</div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
