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 checkbox复选框全选功能简单实例
Oct 09 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
Oct 31 Javascript
jQuery Validate验证框架详解(推荐)
Dec 17 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
Jul 27 Javascript
JS 实现banner图片轮播效果(鼠标事件)
Aug 04 Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
Aug 16 Javascript
javascript 中事件冒泡和事件捕获机制的详解
Sep 01 Javascript
vue 2.0项目中如何引入element-ui详解
Sep 06 Javascript
vue.js默认路由不加载linkActiveClass问题的解决方法
Dec 11 Javascript
详解基于Vue,Nginx的前后端不分离部署教程
Dec 04 Javascript
JS面向对象编程实现的拖拽功能案例详解
Mar 03 Javascript
vue实现列表拖拽排序的功能
Nov 02 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
1 Tube Radio
2021/03/02 无线电
php数组函数序列之rsort() - 对数组的元素值进行降序排序
2011/11/02 PHP
初步介绍PHP扩展开发经验分享
2012/09/06 PHP
分享PHP header函数使用教程
2013/09/05 PHP
ThinkPHP控制器间实现相互调用的方法
2014/10/31 PHP
js 跨域和ajax 跨域问题小结
2009/07/01 Javascript
jQuery插件 tabBox实现代码
2010/02/09 Javascript
javascript实现获取浏览器版本、操作系统类型
2015/01/29 Javascript
AngularJs实现ng1.3+表单验证
2015/12/10 Javascript
jQuery ajax提交Form表单实例(附demo源码)
2016/04/06 Javascript
js轮盘抽奖实例分析
2020/04/17 Javascript
jQuery动态添加与删除tr行实例代码
2016/10/18 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
2018/02/10 Javascript
基于Vuejs的搜索匹配功能实现方法
2018/03/03 Javascript
Javascript实现运算符重载详解
2018/04/07 Javascript
深入理解JS中Number(),parseInt(),parseFloat()三者比较
2018/08/24 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
2019/05/06 Javascript
jquery实现动态创建form并提交的方法示例
2019/05/27 jQuery
JS倒计时两种实现方式代码实例
2020/07/27 Javascript
在Uni中使用Vue的EventBus总线机制操作
2020/07/31 Javascript
整理Python中的赋值运算符
2015/05/13 Python
浅谈配置OpenCV3 + Python3的简易方法(macOS)
2018/04/02 Python
python自定义函数实现最大值的输出方法
2019/07/09 Python
python2 中 unicode 和 str 之间的转换及与python3 str 的区别
2019/07/25 Python
python 已知一个字符,在一个list中找出近似值或相似值实现模糊匹配
2020/02/29 Python
几道数据库的面试题或笔试题
2014/05/31 面试题
新年联欢会主持词
2014/03/27 职场文书
公证委托书大全
2014/04/04 职场文书
导师就业推荐信范文
2014/05/22 职场文书
红领巾广播站广播稿(3篇)
2014/09/20 职场文书
事业单位个人查摆问题及整改措施
2014/10/28 职场文书
二年级上册数学教学计划
2015/01/20 职场文书
社区敬老月活动总结
2015/05/07 职场文书
2015年创先争优工作总结
2015/05/23 职场文书
创业计划书之川味火锅店
2019/09/02 职场文书
python中的getter与setter你了解吗
2022/03/24 Python