jquery 锁定弹出层实现代码

基于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的值越大表示越在上层)。好了,基本就是这样吧!

(0)

相关推荐

  • jquery 锁定弹出层实现代码

    基于jquery的锁定弹出层 这个东西也是随手总结出来的,引用了一些js框架jquery的方法. div遮盖其他控件的方法参考了 对于需要遮盖flash的,请将flash控件的WMode变量值设置为Transparent 使用方法: 复制代码 代码如下: <script src="jquery.js"></script> <script src="effect/maskDiv.js"></script> <scr

  • jquery.Jwin.js 基于jquery的弹出层插件代码

    代码如下: 复制代码 代码如下: (function ($) { var imgdir = 'images/';//图片文件夹路径 var autoHide=false;//悬浮div是否自动隐藏 var hideType='hide';//隐藏的方式 可选参数 hide.slide.fade var hideDelay=0;//悬浮div隐藏过程使用的时间 var hideTime=0;//悬浮div延迟隐藏时间 var zIndex=100;//多个div时获取焦点的div处于顶层 var

  • jQuery Layer弹出层传值到父页面的实现代码

    目前做的项目中用到layer弹层传值,弹层输入框输入文本,点击确定按钮,父页面的树结构,会自动添加分组. 在此粘贴下代码,以后遇到,方便回忆,如有疑问请留言,或许会为您解答 $(document).ready(function(){ //添加任务弹出层 addTask(); }); //弹出层 function addTask(){ $('[data-id="addList"]').on('click', function(){ layer.open({ type: 2,title:

  • jquery实现可自动判断位置的弹出层效果代码

    本文实例讲述了jquery实现可自动判断位置的弹出层效果代码.分享给大家供大家参考.具体如下: 这是一款jquery实现的智能弹出层效果,位置可以自适应,当层靠右边显示时自动往左移.初次运行时请按F5刷新,载入远程jQuery后才能看到效果,点击鼠标左键,弹出层将出现,在最右边点击时层自动往左移. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-auto-check-pos-alert-dlg-demo/ 具体代码如下: <!DOC

  • jquery实现弹出层完美居中效果

    jquery实现弹出层完美居中效果 复制代码 代码如下: showDiv($("#pop"));function showDiv(obj){ $(obj).show(); center(obj); $(window).scroll(function(){  center(obj); }); $(window).resize(function(){  center(obj); }); } function center(obj){ var windowWidth = document.d

  • 关于jquery layui弹出层的使用方法

    Jquery必须大于1.83 layui必须是all,否则不显示 <script src="../js/jquery-1.8.3.min.js"></script> <script src="../layui/layui.all.js"></script> html代码 <input id="about" type="button" value="修改考勤&quo

  • jQuery实现弹出层效果

    本文实例为大家分享了jQuery实现弹出层的具体代码,供大家参考,具体内容如下 ###jQuery实现 弹出层效果 点击弹出层:弹出弹出层 点击阴影:关闭弹出层 点击"关闭"关闭弹出层 整体代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" cont

  • jquery实现弹出层效果实例

    本文实例讲述了jquery实现弹出层效果的方法.分享给大家供大家参考.具体实现方法如下: <head runat="server"> <title>jQuery弹出层</title> <script type="text/javascript" src="js/jquery-1.3.2-min.js"></script> <script type="text/javasc

  • 基于jQuery实现点击弹出层实例代码

    jquery实现点击链接弹出层效果:本例实现的主要原理:jquery操作DOM元素.对层样式的设置.将display:设置为none;让层隐藏: 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net" /> <tit

  • jQuery实现的AJAX简单弹出层效果代码

    本文实例讲述了jQuery实现的AJAX简单弹出层效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/

随机推荐