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 ThickBox插件使用心得(不建议使用)
Sep 08 Javascript
使用js判断数组中是否包含某一元素(类似于php中的in_array())
Dec 12 Javascript
JQuery中$.each 和$(selector).each()的区别详解
Mar 13 Javascript
微信小程序 swiper组件详解及实例代码
Oct 25 Javascript
一个例子轻松学会Vue.js
Jan 02 Javascript
微信小程序 仿猫眼实现实例代码
Mar 14 Javascript
Javascript es7中比较实用的两个方法示例
Jul 21 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
Aug 18 Javascript
vue实现word,pdf文件的导出功能
Jul 31 Javascript
Angular2中监听数据更新的方法
Aug 31 Javascript
Vue 重置组件到初始状态的方法示例
Oct 10 Javascript
详解vue之自行实现派发与广播(dispatch与broadcast)
Jan 19 Vue.js
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
创建数据库php代码 用PHP写出自己的BLOG系统
2010/04/12 PHP
php使用curl实现简单模拟提交表单功能
2017/05/15 PHP
关于Javascript 的 prototype问题。
2007/01/03 Javascript
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3
2008/03/22 Javascript
Javascript判断对象是否相等实现代码
2013/03/18 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
2014/01/23 Javascript
网站基于flash实现的Banner图切换效果代码
2014/10/14 Javascript
mui上拉加载功能实例详解
2017/04/13 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
2017/08/04 Javascript
nodejs连接mysql数据库及基本知识点详解
2018/03/20 NodeJs
layui-laydate时间日历控件使用方法详解
2018/11/15 Javascript
vue实现按需加载组件及异步组件功能
2019/05/27 Javascript
vue 判断元素内容是否超过宽度的方式
2020/07/29 Javascript
vue导入.md文件的步骤(markdown转HTML)
2020/12/31 Vue.js
深入解析Python中的lambda表达式的用法
2015/08/28 Python
Python实现繁体中文与简体中文相互转换的方法示例
2018/12/18 Python
对python xlrd读取datetime类型数据的方法详解
2018/12/26 Python
Python装饰器用法实例分析
2019/01/14 Python
关于python 的legend图例,参数使用说明
2020/04/17 Python
详解python如何引用包package
2020/06/07 Python
python统计mysql数据量变化并调用接口告警的示例代码
2020/09/21 Python
小结Python的反射机制
2020/09/28 Python
python爬虫中PhantomJS加载页面的实例方法
2020/11/12 Python
让IE9以下版本的浏览器兼容HTML5的方法
2014/03/12 HTML / CSS
THE OUTNET美国官网:国际设计师品牌折扣网站
2017/03/07 全球购物
小狗电器官方商城:中国高端吸尘器品牌
2017/03/29 全球购物
英国打印机墨盒销售网站:Ink Factory
2019/10/07 全球购物
.NET笔试题(20个问题)
2016/02/02 面试题
linux比较文件内容的命令是什么
2015/09/23 面试题
临床医师专业个人自我评价
2014/01/08 职场文书
最新的互联网创业计划书
2014/01/10 职场文书
喝酒检查书范文
2014/02/23 职场文书
学生请假条
2014/04/11 职场文书
捐款倡议书
2014/04/14 职场文书
学术会议领导致辞
2015/07/29 职场文书
vue如何批量引入组件、注册和使用详解
2021/05/12 Vue.js