基于jquery的鎖定彈出層
這個東西也是隨手總結出來的，引用了一些js框架jquery的方法。
div遮蓋其他控件的方法參考了 對于需要遮蓋flash的，請將flash控件的WMode變量值設置為Transparent
使用方法：
代碼如下:
<script src="jquery.js"></script>
<script src="effect/maskDiv.js"></script>
<script>
//配置模塊
var moduleEvent = [{"idName":"close" , "eventName":"click" , "doMethod":"CLOSE_DIV"},{"idObj":window,"eventName":"resize" , "doMethod":"RESIZE_WINDOW"}];
qihoo_effect_maskDiv.showMaskDiv("your div id" , moduleEvent); //請把div的display設置為none。
*******************************************************
effect/maskDiv.js
代碼如下:
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.documentElement.scrollTop)+"px",'left':parseInt(screen.width/4+document.documentElement.scrollLeft)+"px",'zIndex':7};
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"};
