基于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"};

}

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

}

};

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

这里是一个不引入jquery框架的实现同样效果的程序。

引入文件

<script src="http://www.jb51.netjs/jquery.js"></script>

<script src="http://www.jb51.netjs/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();

js实现的遮盖层的定义：

经常遇到要弹出一个悬浮层，鼠标的事件只能在本层上有效，底层会失效。能用的做 法是在悬浮层和底层之间在加一个遮盖层，遮盖住整个浏览器，这样就不能点击底层的任何东西了。

复制代码 代码如下:

var w = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) + "px"; //获取宽

var h = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) + "px"; //获取高

//定义一个透明背景层

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)

其实说明最主要还是说明一下背景层的CSS定义。首先要使top和left有效，就要设置 position:absolute。filter:"alpha(opacity=0)设置透明度，数值0-100，0表示完全透明，100表示不透明。background设置背景层的颜色。zIndex的值只要比底层的高，比弹出层的低就行了。（zIndex的值越大表示越在上层）。好了，基本就是这样吧！