jquery lock popup layer implementation code_jquery

Lock popup layer based on jquery
This thing is also summed up casually, citing some methods of js framework jquery.
The method of div covering other controls is as follows. For those who need to cover flash, please set the WMode variable value of the flash control to Transparent
Usage:

Copy Code The code is as follows:

<script> <br> </div> <br>//Configuration module<br>var moduleEvent = [{"idName":"close" , "eventName" :"click" , "doMethod":"CLOSE_DIV"},{"idObj":window,"eventName":"resize" , "doMethod":"RESIZE_WINDOW"}]; <br>qihoo_effect_maskDiv.showMaskDiv("your div id " , moduleEvent); //Please set the div's display to none. <br>**************************************************** ******** <br>effect/maskDiv.js <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="71710" class="copybut" id="copybut71710" onclick="doCopy('code71710')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code71710"> <br>var qihoo_effect_maskDiv = { <br>_module : {}, <br>_css : {}, <br>_instance : "" , <br>_event : {"CLOSE_WINDOW" : function() { window.close(); } , "CLOSE_DIV" : function(){qihoo_effect_maskDiv.closeDiv();} , "RESIZE_WINDOW" : function(){qihoo_effect_maskDiv.resizeWindow();} }, <br>_isIe : eval("false;/*@cc_on@if(@x5fwin32)isMSIE=true@end@*/") , <br>init : function (){ <br>if (this._instance){ <br>return this._instance; <br>} <br>this.appendBackGroundDiv(); <br>this._instance = this; <br>return this._instance; <br>}, <br>appendBackGroundDiv : function (){ <br>this._module.backGroundDiv = $("<div id='qihoo_effect_maskDiv_module_backGroundDiv'></div>"); <br>this._module.backGroundDiv.appendTo("body"); <br>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"}; <br>this._module.backGroundDiv.css(this._css.mask); <br>this._module.coverIframe = $("<iframe src='javascript:false' id='qihoo_effect_maskDiv_module_iframe' frameborder='1'></iframe>"); <br>this._css.normalIframe = {'position':'absolute','left':'-1000px','top':'-1000px','z-index':7}; <br>this._module.coverIframe.css(this._css.normalIframe); <br>this._module.coverIframe.appendTo("body"); <br>}, <br>showMaskDiv : function (showDivId , moduleEvent, position ){ <br>instance = this; <br>if (this._isIe){ <br>if(document.readyState != "complete"){ <br>setTimeout(function(){instance.showMaskDiv(showDivId , moduleEvent , position);} , 100); <br>return false; <br>} <br>} <br>if ("" == this._instance){ <br>this.init(); <br>} <br>this._module.showDiv = $("#" showDivId); <br>if (typeof position == 'undefined'){ <br>this._css.coverIframe = {'position':'absolute','top':parseInt(screen.height/4 document.documentElement.scrollTop) "px",'left':parseInt(screen.width/4 document.documentElement.scrollLeft) "px",'zIndex':7}; <br>this._css.coverd = {"zIndex" : 10 , "position" : "absolute" ,"width":"400px" , "height":"240px" ,"top": parseInt(screen.height/4 document.documentElement.scrollTop) "px", "left":parseInt(screen.width/4 document.documentElement.scrollLeft) "px"}; <br>} <br>else{ <br>this._css.coverIframe = {'position':'absolute',"height" : position.height, "width":position.width , "top": position.top , "left":position.left,'zIndex':7}; <br>this._css.coverd = {"zIndex" : 10 , "position" : "absolute" , "height" : position.height, "width":position.width , "top": position.top , "left":position.left}; <br>} <br>for (var i in moduleEvent){ <br>if (typeof moduleEvent[i].idName != "undefined") { <br>$("#" moduleEvent[i].idName).bind(moduleEvent[i].eventName , this._event[moduleEvent[i].doMethod]); <br>} <br>if (typeof moduleEvent[i].idObj != "undefined") { <br>$(moduleEvent[i].idObj).bind(moduleEvent[i].eventName , this._event[moduleEvent[i].doMethod]); <br>} <br>} <br>this._module.backGroundDiv.show(); <br>showDivFront = this._module.showDiv; <br>cssParam = this._css; <br>coveredIframe = this._module.coverIframe; <br>this._module.backGroundDiv.animate({opacity:0.75},"normal" , function(){coveredIframe.css(cssParam.coverIframe);showDivFront.show();}); <br>this._module.showDiv.css(this._css.coverd); <br>}, <br>resizeWindow : function (){ <br>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"}; <br>this._module.backGroundDiv.css(this._css.mask); <br>}, <br>closeDiv : function (){ <br>this._module.coverIframe.css(this._css.normalIframe); <br>this._module.showDiv.hide(); <br>hidebBackGroundDiv = this._module.backGroundDiv; <br>this._module.backGroundDiv.animate({opacity:0},"normal", function(){hidebBackGroundDiv.hide();}); <br>} <br>}; <br> </div> <br>Looking at the comments, I added some usage: <br><br>Here is a program that achieves the same effect without introducing the jquery framework. <br><br>Introduction file<br><script src="/js/jquery.js"></script>

• An in-depth analysis of the Bootstrap list group component
• Detailed explanation of JavaScript function currying
• Complete example of JS password generation and strength detection (with demo source code download)
• Angularjs integrates WeChat UI (weui)
• How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills