Jquery locks the pop-up layer implementation code

Locking the pop-up layer based on jquery
This is also summarized at will, Referencing some js framework jquery methods.
For more information about how to use div to hide other controls, set the WMode variable value of the flash control to Transparent.
Usage:
Copy codeThe Code is as follows:
<Script src = "jquery. js"> </script>
<Script src = "effect/maskDiv. js"> </script>
<Script>

// Configuration module
Var moduleEvent = [{"idName": "close", "eventName": "click", "doMethod": "CLOSE_DIV" },{ "idObj": window, "eventName": "resize", "doMethod": "RESIZE_WINDOW"}];
Qihoo_effect_maskDiv.showMaskDiv ("your div id", moduleEvent); // set the display of div to none.
**************************************** ***************
Effect/maskDiv. js
Copy codeThe Code is as follows:
Var qihoo_effect_maskDiv = {
_ Module :{},
_ Css :{},
_ Instance :"",
_ Event: {"CLOSE_WINDOW": function () {window. close () ;}, "CLOSE_DIV": function () {qihoo_effect_maskDiv.closeDiv () ;}, "RESIZE_WINDOW": function () {qihoo_effect_maskDiv.resizeWindow ();}},
_ IsIe: eval ("false;/* @ cc_on @ if (@ \ x5fwin32) isMSIE = true @ end @*/"),
Init: function (){
If (this. _ instance ){
Return this. _ instance;
}
This. appendBackGroundDiv ();
This. _ instance = this;
Return this. _ instance;
},
AppendBackGroundDiv: function (){
This. _ module. backGroundDiv =$ ("<div id = 'qihoo _ effect_maskDiv_module_backGroundDiv '> </div> ");
This. _ module. backGroundDiv. appendTo ("body ");
This. _ css. mask = {"background-color": "#000", "position": "absolute", "-moz-opacity": "0.75", "filter ": "alpha (opacity = 75)", "z-index": 5, "width": document. body. clientWidth + 100, "height": document. body. clientHeight + 300, "top": "0px", "left": "0px", "display": "none "};
This._module.backGroundDiv.css (this. _ css. mask );
This. _ module. coverIframe = $ ("<iframe src = 'javascript: false' id = 'qihoo _ effect_maskDiv_module_iframe 'frameborder = '1'> </iframe> ");
This. _ css. normalIframe = {'position': 'absolute ', 'left':'-1000px ', 'top':'-1000px ', 'z-Index': 7 };
This._module.coverIframe.css (this. _ css. normalIframe );
This. _ module. coverIframe. appendTo ("body ");
},
ShowMaskDiv: function (showDivId, moduleEvent, position ){
Instance = this;
If (this. _ isIe ){
If (document. readyState! = "Complete "){
SetTimeout (function () {instance. showMaskDiv (showDivId, moduleEvent, position) ;}, 100 );
Return false;
}
}
If ("" = this. _ instance ){
This. init ();
}
This. _ module. showDiv =$ ("#" + showDivId );
If (typeof position = 'undefined '){
This. _ css. coverIframe = {'position': 'absolute ', 'top': parseInt (screen. height/4+document.doc umentElement. scrollTop) + "px", 'left': parseInt (screen. width/4+document.doc umentElement. scrollLeft) + "px", 'zindex': 7 };
This. _ css. coverd = {"zIndex": 10, "position": "absolute", "width": "400px", "height": "240px", "top ": parseInt (screen. height/4+document.doc umentElement. scrollTop) + "px", "left": parseInt (screen. width/4+document.doc umentElement. scrollLeft) + "px "};
}
Else {
This. _ css. coverIframe = {'position': 'absolute ', "height": position. height, "width": position. width, "top": position. top, "left": position. left, 'zindex': 7 };
This. _ css. coverd = {"zIndex": 10, "position": "absolute", "height": position. height, "width": position. width, "top": position. top, "left": position. left };
}
For (var I in moduleEvent ){
If (typeof moduleEvent [I]. idName! = "Undefined "){
$ ("#" + ModuleEvent [I]. idName). bind (moduleEvent [I]. eventName, this. _ event [moduleEvent [I]. doMethod]);
}
If (typeof moduleEvent [I]. idObj! = "Undefined "){
$ (ModuleEvent [I]. idObj). bind (moduleEvent [I]. eventName, this. _ event [moduleEvent [I]. doMethod]);
}
}
This. _ module. backGroundDiv. show ();
ShowDivFront = this. _ module. showDiv;
CssParam = this. _ css;
CoveredIframe = this. _ module. coverIframe;
This. _ module. backGroundDiv. animate ({opacity: 0.75}, "normal", function(+coverediframe.css (cssParam. coverIframe); showDivFront. show ();});
This._module.showDiv.css (this. _ css. coverd );
},
ResizeWindow: function (){
This. _ css. mask = {"background-color": "#000", "position": "absolute", "-moz-opacity": "0.75", "opacity ": "0.75", "filter": "alpha (opacity = 75)", "zIndex": 5, "width": document. body. clientWidth + 100, "height": document. body. clientHeight + 300, "top": "0px", "left": "0px "};
This._module.backGroundDiv.css (this. _ css. mask );
},
CloseDiv: function (){
This._module.coverIframe.css (this. _ css. normalIframe );
This. _ module. showDiv. hide ();
HidebBackGroundDiv = this. _ module. backGroundDiv;
This. _ module. backGroundDiv. animate ({opacity: 0}, "normal", function () {hidebBackGroundDiv. hide ();});
}
};

According to the comments, I added some usage:

Here is a program that does not introduce the jquery framework to achieve the same effect.

Import File
<Script src = "/js/jquery. js"> </script>
<Script src = "/js/maskDiv. js"> </script>
Configure events
<Script>
Var moduleEvent = [
{"IdName": "closeForm", "eventName": "click", "doMethod": "CLOSE_DIV "},
{"IdObj": window, "eventName": "resize", "doMethod": "RESIZE_WINDOW "}
];
</Script>
Note: idName is the id of the html component bound to the event, and idObj is the html control variable.
Configure the initial position (optional)
<Script>
Var position = {"width": "300px", "height": "400px", "top": "300px", "left": "720px "};
</Script> display the Mask Layer
Qihoo_effect_maskDiv.showMaskDiv (divId, moduleEvent, position); or qihoo_effect_maskDiv.showMaskDiv (divId, moduleEvent );
Hidden Mask Layer
Qihoo_effect_maskDiv.closeDiv ();

Definition of the coverage layer implemented by js:
A floating layer is often popped up. The mouse event can only be effective on this layer, and the underlying layer will become invalid. The method that can be used is to add a covering layer between the floating layer and the underlying layer to cover the entire browser, So that you cannot click anything at the underlying layer.
Copy codeThe Code is as follows:
Var w = Math.max(document.doc umentElement. scrollWidth, document.doc umentElement. clientWidth) + "px"; // obtain the width
Var h = Math.max(document.doc umentElement. scrollHeight, document.doc umentElement. clientHeight) + "px"; // get the height
// Define a transparent background layer
Var gb = $ ("<div/>"). attr ("id", "gb ")
. Css ({top: "0", left: "0", zIndex: "2", position: "absolute", filter: "alpha (opacity = 0)", background: "# fff "})
. Css ("width", w).css ("height", h)

In fact, it mainly describes the CSS definition of the background layer. To make top and left valid, you must set position: absolute. Filter: "alpha (opacity = 0) sets the transparency. The value 0-100. 0 indicates completely transparent, and indicates opacity. Set the background color. The value of zIndex must be higher than that of the underlying layer and lower than that of the pop-up layer. (The greater the value of zIndex, the higher it is ). Okay, that's basically it!