基于jquery的锁定弹出层

这个东西也是随手总结出来的，引用 了一些js框架jquery的方法。div遮盖其他控件的方法参考了：http://www.leeyupeng.com/?p=265。

对于需要遮盖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。

</script>

*******************************************************

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"};                  
         }  
         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();});   
    }   
};

 

*********************************

看评论所言，加了一点用法：

http://liuguanyu.blog.hexun.com/28869710_d.html 这里是一个不引入jquery框架的实现同样效果的程序。

引入文件

<script src="/js/jquery.js"></script>
<script src="/js/maskDiv.js"></script>

配置事件

<script>
var moduleEvent = [
{"idName":"closeForm" , "eventName":"click" , "doMethod":"CLOSE_DIV"},
{"idObj":window,"eventName":"resize" , "doMethod":"RESIZE_WINDOW"}
];
</script>

• 注：idName是绑定事件的html组件的id,idObj是html控件变量

配置初始位置（可选步骤）

 <script>
var position = {"width":"300px", "height":"400px" , "top":"300px", "left":"720px"};
</script> 

显示遮罩层

qihoo_effect_maskDiv.showMaskDiv(divId, moduleEvent , position);或者qihoo_effect_maskDiv.showMaskDiv(divId, moduleEvent );

隐去遮罩层

qihoo_effect_maskDiv.closeDiv();