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 相关文章推荐
JavaScript和JQuery实用代码片段(一)
Apr 07 Javascript
javascript判断iphone/android手机横竖屏模式的函数
Dec 20 Javascript
表格奇偶行设置不同颜色的核心JS代码
Dec 24 Javascript
调用innerHTML之后onclick失效问题的解决方法
Jan 28 Javascript
js生成随机数的过程解析
Nov 24 Javascript
jQuery自制提示框tooltip改进版
Aug 01 Javascript
canvas雪花效果核心代码分享
Feb 19 Javascript
Vue.js学习教程之列表渲染详解
May 17 Javascript
JavaScript原型继承_动力节点Java学院整理
Jun 30 Javascript
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
Jan 09 Javascript
layui下拉列表select实现可输入查找的方法
Sep 28 Javascript
JS常见错误(Error)及处理方案详解
Jul 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
各种战术和打法的原创者
2020/03/04 星际争霸
Symfony2实现在doctrine中内置数据的方法
2016/02/05 PHP
详谈php静态方法及普通方法的区别
2016/10/04 PHP
thinkPHP简单实现多个子查询语句的方法
2016/12/05 PHP
Yii2结合Workerman的websocket示例详解
2018/09/10 PHP
再谈Yii Framework框架中的事件event原理与应用
2020/04/07 PHP
JS实现的省份级联实例代码
2013/06/24 Javascript
Jquery操作js数组及对象示例代码
2014/05/11 Javascript
js使用onmousemove和onmouseout获取鼠标坐标的方法
2015/03/31 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
2015/04/03 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
2015/05/01 Javascript
通过说明与示例了解js五种设计模式
2019/06/17 Javascript
JS实现盒子拖拽效果
2020/02/06 Javascript
Vue中computed及watch区别实例解析
2020/08/01 Javascript
详解Vue中Axios封装API接口的思路及方法
2020/10/10 Javascript
使用js原生实现年份轮播选择效果实例
2021/01/12 Javascript
分析用Python脚本关闭文件操作的机制
2015/06/28 Python
python 匹配url中是否存在IP地址的方法
2018/06/04 Python
Django框架实现逆向解析url的方法
2018/07/04 Python
pyspark.sql.DataFrame与pandas.DataFrame之间的相互转换实例
2018/08/02 Python
如何用Python制作微信好友个性签名词云图
2019/06/28 Python
python粘包问题及socket套接字编程详解
2019/06/29 Python
python找出因数与质因数的方法
2019/07/25 Python
Pycharm在指定目录下生成文件和删除文件的实现
2020/12/28 Python
Yahoo-PHP面试题1
2016/07/20 面试题
统计员岗位职责
2013/11/14 职场文书
个人简历中自我评价
2014/02/11 职场文书
观看《永远的雷锋》心得体会
2014/03/12 职场文书
春节联欢晚会主持词
2014/03/24 职场文书
群众路线学习心得体会范文
2014/11/05 职场文书
本科毕业论文指导教师评语
2014/12/30 职场文书
亚布力滑雪场导游词
2015/02/09 职场文书
我的1919观后感
2015/06/03 职场文书
2016年幼儿园庆六一开幕词
2016/03/04 职场文书
Go 语言中 20 个占位符的整理
2021/10/16 Golang
Django基础CBV装饰器和中间件
2022/03/22 Python