jquery 锁定弹出层实现代码


Posted in Javascript onFebruary 23, 2010

基于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="/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实现的遮盖层的定义:
经常遇到要弹出一个悬浮层,鼠标的事件只能在本层上有效,底层会失效。能用的做 法是在悬浮层和底层之间在加一个遮盖层,遮盖住整个浏览器,这样就不能点击底层的任何东西了。

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的值越大表示越在上层)。好了,基本就是这样吧!
Javascript 相关文章推荐
jQuery编写widget的一些技巧分享
Oct 28 Javascript
JQUBar 基于JQUERY的柱状图插件
Nov 23 Javascript
JS下拉框内容左右移动效果的具体实现
Jul 10 Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
Mar 21 Javascript
JavaScript动态改变div属性的实现方法
Jul 22 Javascript
jQuery实现网页抖动的菜单抖动效果
Aug 07 Javascript
asp.net中oracle 存储过程(图文)
Aug 12 Javascript
原生js实现回复评论功能
Jan 18 Javascript
javascript容错处理代码(屏蔽js错误)
Jan 20 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
Mar 08 Javascript
jQuery实现移动端Tab选项卡效果
Mar 15 Javascript
JS 事件机制完整示例分析
Jan 15 Javascript
javascript document.compatMode兼容性
Feb 23 #Javascript
js操作ajax返回的json的注意问题!
Feb 23 #Javascript
javascript入门基础之私有变量
Feb 23 #Javascript
第一个JavaScript入门基础 document.write输出
Feb 22 #Javascript
jQuery入门问答 整理的几个常见的初学者问题
Feb 22 #Javascript
jQuery 操作下拉列表框实现代码
Feb 22 #Javascript
JavaScript 编写匿名函数的几种方法
Feb 21 #Javascript
You might like
一次编写,随处运行
2006/10/09 PHP
PHP中函数内引用全局变量的方法
2008/10/20 PHP
ajax+php打造进度条 readyState各状态
2010/03/20 PHP
深入解析PHP垃圾回收机制对内存泄露的处理
2013/06/14 PHP
thinkphp学习笔记之多表查询
2014/07/28 PHP
Php连接及读取和写入mysql数据库的常用代码
2014/08/11 PHP
PHP实现过滤掉非汉字字符只保留中文字符
2015/06/04 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
ThinkPHP5.1验证码功能实现的示例代码
2020/06/08 PHP
基于prototype扩展的JavaScript常用函数库
2010/11/30 Javascript
js Map List 遍历使用示例
2013/07/10 Javascript
html文件中jquery与velocity变量中的$冲突的解决方法
2013/11/01 Javascript
实例讲解jquery中mouseleave和mouseout的区别
2016/02/17 Javascript
理解javascript函数式编程中的闭包(closure)
2016/03/08 Javascript
js实现精确到秒的日期选择器完整实例
2016/04/30 Javascript
JS中正则表达式要注意lastIndex属性
2017/08/08 Javascript
浅析从vue源码看观察者模式
2018/01/29 Javascript
从理论角度讨论JavaScript闭包
2019/04/03 Javascript
微信小程序开发技巧汇总
2019/07/15 Javascript
[02:56]《DAC最前线》之国外战队抵达上海备战亚洲邀请赛
2015/01/28 DOTA
详解使用python的logging模块在stdout输出的两种方法
2017/05/17 Python
Python json模块dumps、loads操作示例
2018/09/06 Python
pandas 快速处理 date_time 日期格式方法
2018/11/12 Python
Python第三方Window模块文件的几种安装方法
2018/11/22 Python
基于打开pycharm有带图片md文件卡死问题的解决
2020/04/24 Python
python drf各类组件的用法和作用
2021/01/12 Python
学点简单的Django之第一个Django程序的实现
2021/02/24 Python
商务英语求职自荐信范文
2013/12/24 职场文书
销售员个人求职的自我评价
2014/02/10 职场文书
学历公证委托书
2014/04/09 职场文书
导师就业推荐信范文
2014/05/22 职场文书
留守儿童工作方案
2014/06/02 职场文书
会计专业应届生自荐信
2014/06/28 职场文书
共青团员自我评价
2015/03/10 职场文书
2015年财务部工作总结
2015/04/10 职场文书
丧事答谢词大全
2015/09/30 职场文书