Tip: you can modify some code before running
<!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><title>Js full screen transparent mask lock screen effect</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><!--把下面代码加到<head>与</head>之间--><style type="text/css"># 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 language="javascript">(Function () {// get the object var $ = function (id) {return document. getElementById (id) ;}; // traverse var each = function (a, B) {for (var I = 0, len =. 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 (ty Pe, 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) ;};// block the default browser behavior var stopDefault = function (e) {e. preventDefault? E. preventDefault (): e. returnValue = false ;}; // obtain the position of the page scroll bar var getPage = function () {var dd = document.doc umentElement, db = document. body; return {left: Math. max (dd. scrollLeft, db. scrollLeft), top: Math. max (dd. scrollTop, db. scrollTop) };}; // screen lock var lock = {show: function () {$ ('pageoverlay '). style. visibility = 'visable'; var p = getPage (), left = p. left, top = p. top; // page mouse operation restriction this. mouse = function (evt) {var e = evt | window. event; stopDefault (e); scroll (left, top) ;}; each (['domainscroll ', 'mousewheel', 'scroll', 'textmenu '], function (o, i) {bind (document, o, lock. mouse) ;}); // mask specific buttons: F5, Ctrl + R, Ctrl + A, Tab, Up, Downthis. 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, 'keylow', lock. key) ;}, close: function () {$ ('pageoverlay '). style. visibility = 'hiddy'; each (['dommousescroll ', 'mousewheel', 'scroll ', 'textmenu'], function (o, I) {unbind (document, o, lock. mouse) ;}); unbind (document, 'keylow', lock. key) ;}}; bind (window, 'load', function () {$ ('btn _ lock '). onclick = function () {lock. show () ;}; $ ('pageoverlay '). onclick = function () {lock. close ();};});})();</script></head><body><!--把下面代码加到<body>与</body>之间--><button id="btn_lock" >Enable Screen Lock</button><ol id="test"> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li> <li>Www.111cn.net</li></ol><div id="pageOverlay"></div></body></html>
Tip: you can modify some code before running
