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"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/> <title>The most streamlined and powerful JS mask layer in history, supporting the ie firefox jQuery mask layer</title> <scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <scripttype="text/javascript">// Display the function showBg (ct, content) {var bH = $ ("body") of the gray JS mask layer "). height (); var bW = $ ("body "). width () + 16; var objWH = getObjWh (ct); $ ("# fullbg" ).css ({width: bW, height: bH, display: "block "}); var tbT = objWH. split ("|") [0] + "px"; var tbL = objWH. split ("|") [1] + "px"; $ ("#" ctct.css ({top: tbT, left: tbL, display: "block "}); $ ("#" your content.html .html ("<div >Loading. Please wait...</div>"); $ (Window ). scroll (function () {resetBg ()}); $ (window ). resize (function () {resetBg ()});} function getObjWh (obj) {var st=document.doc umentElement. scrollTop; // The distance from the scroll bar to the top of the var slice document.doc umentElement. scrollLeft; // The distance from the scroll bar to the left var chw.document.doc umentElement. clientHeight; // The height of the screen var cw1_document.doc umentElement. clientWidth; // the screen width var ob1_=$ ("#" + obj ). height (); // The height of the floating object var objW =$ ("#" + obj ). width (); // The width of the floating object var objT = Number (st) + (Number (ch)-Number (ob1_))/2; var objL = Number (sl) + (Number (cw)-Number (objW)/2; return objT + "|" + objL;} function resetBg () {var fullbg = $ ("# fullbg" ).css ("display"); if (fullbg = "block") {var bH2 = $ ("body "). height (); var bW2 = $ ("body "). width () + 16; $ ("# fullbg" ).css ({width: bW2, height: bH2}); var objV = getObjWh ("dialog"); var tbT = objV. split ("|") [0] + "px"; var tbL = objV. split ("|") [1] + "px"; $ ("# dialog" ).css ({top: tbT, left: tbL });}} // function closeBg () {$ ("# fullbg" ).css ("display", "none") to close the gray JS mask layer and Operation window "); $ ("# dialog" ).css ("display", "none ");}</script> <styletype="text/css"># Fullbg {background-color: Gray; display: none; z-index: 3; position: absolute; left: 0px; top: 0px; filter: Alpha (Opacity = 30 ); /* IE */-moz-opacity: 0.4;/* Moz + FF */opacity: 0.4;} # dialog {position: absolute; width: 200px; height: 200px; background: # F00; display: none; z-index: 5 ;}# main {height: 1500px ;}</style> </head> <body> <divid="main"> <ahref="#rhis"onclick="showBg('dialog','dialog_content');">Click here to view the JS mask layer effect</div> <!-- JS遮罩层 --> <divid="fullbg"></div> <!-- end JS遮罩层 --> <!-- 对话框 --> <divid="dialog"> <divid="dialog_content"></div> <div ><ahref="#"onclick="closeBg();">Close</div> </div> <!-- JS遮罩层上方的对话框 --> </body> </html> </td> </tr></table>
Tip: you can modify some code before running
