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
<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>
Latest Articles by Author
-
2024-10-22 09:46:29
-
2024-10-13 13:53:41
-
2024-10-12 12:15:51
-
2024-10-11 22:47:31
-
2024-10-11 19:36:51
-
2024-10-11 15:50:41
-
2024-10-11 15:07:41
-
2024-10-11 14:21:21
-
2024-10-11 12:59:11
-
2024-10-11 12:17:31
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
