快捷導(dǎo)航

jquery 鎖定彈出層實(shí)現(xiàn)代碼

更新時(shí)間：2010年02月23日 14:23:50 作者：

這個(gè)東西也是隨手總結(jié)出來(lái)的，引用了一些js框架jquery的方法。

基于jquery的鎖定彈出層
這個(gè)東西也是隨手總結(jié)出來(lái)的，引用了一些js框架jquery的方法。
div遮蓋其他控件的方法參考了對(duì)于需要遮蓋flash的，請(qǐng)將flash控件的WMode變量值設(shè)置為T(mén)ransparent
使用方法：

復(fù)制代碼代碼如下:

 
<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); //請(qǐng)把div的display設(shè)置為none。
*******************************************************
effect/maskDiv.js

復(fù)制代碼代碼如下:

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

看評(píng)論所言，加了一點(diǎn)用法：

這里是一個(gè)不引入jquery框架的實(shí)現(xiàn)同樣效果的程序。

引入文件
<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();

js實(shí)現(xiàn)的遮蓋層的定義：
經(jīng)常遇到要彈出一個(gè)懸浮層，鼠標(biāo)的事件只能在本層上有效，底層會(huì)失效。能用的做法是在懸浮層和底層之間在加一個(gè)遮蓋層，遮蓋住整個(gè)瀏覽器，這樣就不能點(diǎn)擊底層的任何東西了。

復(fù)制代碼代碼如下:

 
var w = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) + "px"; //獲取寬 
var h = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) + "px"; //獲取高 
//定義一個(gè)透明背景層 
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) 

其實(shí)說(shuō)明最主要還是說(shuō)明一下背景層的CSS定義。首先要使top和left有效，就要設(shè)置 position:absolute。filter:"alpha(opacity=0)設(shè)置透明度，數(shù)值0-100，0表示完全透明，100表示不透明。background設(shè)置背景層的顏色。zIndex的值只要比底層的高，比彈出層的低就行了。（zIndex的值越大表示越在上層）。好了，基本就是這樣吧！

您可能感興趣的文章: