>

一天二个js(5)本身编排的弹层插件

- 编辑:乐百家599手机首页 -

一天二个js(5)本身编排的弹层插件

代码:

复制代码 代码如下:

2.尖端应用
<展现弹层>
ATbox(
    "#alert",        ★必填,弹层名称,ID、Class均可
    ".ATclose",    ☆选填,关闭开关,默以为".ATclose"
    "center",        ☆选填,水平地点,默以为居中,接受"left"、"center"、"right"、250、"250px"等数值
    "center",        ☆选填,垂直地方,默认为居中,接受"top"、"middle"、"bottom"、250、"250px"等数值
    "",                    ☆选填,弹层宽度,暗许取该弹层实际增进率,接受250、"250px"等数值
    "",                    ☆选填,弹层高度,暗中认可取该弹层实际高度,接受250、"250px"等数值
    false,            ☆选填,关闭遮罩,暗许为false,关闭为true
    "#000",            ☆选填,遮罩颜色,默以为"#000"
    "0.6",            ☆选填,遮罩发光度,默许为"0.6"
    false,            ☆选填,锁定滚动条,默感到false,锁定为true
    false                ☆选填,点遮罩关闭弹层,默以为false,启用为true
);
使用验证结束*/
/*总结弹层插件*/
//(a:ID, b:宽, c:高,d:水平地点, e:垂直地点, f:关闭弹层名称, g:关闭遮罩, h:遮罩颜色, i:遮罩折射率, j:锁定滚动条, k:点击遮罩关闭弹窗)
;(function($){
    $.AlertBox = {
//-----------------------------------------弹层展现"_show"------------------------------------------------------------
        _show:function(a,f,d,e,b,c,g,h,i,j,k,l){
            //浏览器剖断
            var browserType = $.browser.msie&&$.browser.version<=6;
            //遮罩
            if(!h){h="#000"};//颜色
            if(!i){i="0.6"};//透明度
            if(g!=true){
                $("body").append('<div id="ATMask"></div>');
                var ATMask = $("#ATMask"),
                        ATMaskIf = "";
                if(browserType){
                    ATMask.append('<iframe id="ATMaskIf" frameborder="0" scrolling="no"></iframe>');
                    ATMaskIf = $("#ATMaskIf");
                };
                $.AlertBox._mask(ATMask,ATMaskIf,h,i);
            };
            //点击遮罩关闭弹窗(IE6带iframe暂未达成)
            if(k==true&&ATMask){
                ATMask.click(function(){
                    $.AlertBox._hide(a,ATMask);
                });   
            };
            //锁定滚动条
            if(j==true){
                $("html,body").css({"width":"100%","height":"100%","overflow":"hidden"});
                $("body").attr("ATlock","true");
            };
            //弹层地方
            $.AlertBox._position(a,b,c,d,e,browserType,0);
            //绑定窗口变化跟滚动条事件;
            $.AlertBox._change(true,a,b,c,d,e,ATMask,ATMaskIf,browserType);
            //关闭弹层名称
            if(!f){
                $(".ATclose").live("click",function(){$.AlertBox._hide(a,ATMask);});
            }else{
                $(f).live("click",function(){$.AlertBox._hide(a,ATMask);});   
            };
            //展现弹层
            $(a).show();
        },
//-----------------------------------------弹层掩盖"_hide"------------------------------------------------------------
        _hide:function(a,ATMask){
            if($("body").attr("ATlock")=="true"){
                $("html,body").removeAttr("style");
                $("body").attr("ATlock","");
            };
            if(ATMask){ATMask.remove();};
            if(a){$(a).hide();};
            $.AlertBox._change(false);
        },
//-----------------------------------------遮罩样式大小"_mask"------------------------------------------------------------
        _mask:function(ATMask,ATMaskIf,h,i){
            ATMask.css({
                "position": "absolute",
                "z-index": 2000000000,
                "top": 0,
                "left": 0,
                "width": "100%",//$(document.body).outerWidth(true)
                "height": $(document).height(),
                "background": h,
                "opacity": i
            });
            if(ATMaskIf){
                ATMaskIf.css({
                    "position": "absolute",
                    "z-index": -1,
                    "top": 0,
                    "left": 0,
                    "width": "100%",//$(document.body).outerWidth(true)
                    "height": $(document).height(),
                    "opacity": 0
                });   
            };
        },
//-----------------------------------------弹层地方"_position"------------------------------------------------------------
        _position:function(a,b,c,d,e,browserType,speed){
            var winWidth = $(window).width(), 
            winHeight = $(window).height(),
            scrHeight = $(document).scrollTop(),
            centerWidth,
            centerHeight;
            //参数"宽",暗中认可弹层宽度;
            if(!b){
                b=$(a).outerWidth(true);
            }else{
                b=parseInt(b);   
            };
            //参数"高",暗许弹层中度;
            if(!c){
                c=$(a).outerHeight(true);
            }else{
                c=parseInt(c);   
            };
            //参数"水平地方",默许居中;
            if(d=="right"){
                centerWidth = 0;
                $(a).css({"right":centerWidth,"left":"auto"});
            }else{
                if(d=="left"){
                    centerWidth = 0;
                }else if(d=="center"||!d){
                    centerWidth = (winWidth-b)/2;
                }else{
                    centerWidth = d;
                };
                $(a).css({"left":centerWidth});       
            };
            //参数"垂直地点",暗许居中;
            if(e=="top"){
                centerHeight = scrHeight;
            }else if(e=="center"||e=="middle"||!e){
                centerHeight = (winHeight-c)/2 scrHeight;
            }else if(e=="bottom"){
                centerHeight = winHeight-c scrHeight;   
            }else{
                centerHeight = parseInt(e) scrHeight;
            };
            $(a).css({"z-index":2000000001});
            if(browserType){
                $(a).css({"position":"absolute"}).stop().animate({"top":centerHeight},speed);   
            }else{
                $(a).css({"position":"fixed","top":centerHeight});   
            };
        },
//-----------------------------------------窗口变化及滚动条"_change"------------------------------------------------------------
        _change:function(z,a,b,c,d,e,ATMask,ATMaskIf,browserType){
            if(z==false){
                $(window).unbind("resize",AlertBoxHL_R);
                $(window).unbind("scroll",AlertBoxHL_S);
            }else{
                $(window).bind("resize", AlertBoxHL_R = function(){
                    if(ATMask){
                        $.AlertBox._mask(ATMask,ATMaskIf);
                    };
                    $.AlertBox._position(a,b,c,d,e,browserType,"fast");
                });
                $(window).bind("scroll", AlertBoxHL_S = function(){
                    if(browserType){
                        $.AlertBox._position(a,b,c,d,e,browserType,"fast");   
                    };
                });
            };
        }
    };
    ATbox = function(a,f,d,e,b,c,g,h,i,j,k,l){
        $.AlertBox._show(a,f,d,e,b,c,g,h,i,j,k,l);   
    };
    CDbox = function(a){
        $.AlertBox._hide(a,$("#ATMask"));   
    };
})(jQuery);

<script type="text/javascript">
$(document).ready(function(){
alert($(window).height()); //浏览器当前窗口可视区域中度
alert($(document).height()); //浏览器当前窗口文书档案的可观
alert($(document.body).height());//浏览器当前窗口文书档案body的莫斯中国科学技术大学学
alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总中度满含border padding margin
alert($(window).width()); //浏览器当前窗口可视区域升幅
alert($(document).width());//浏览器当前窗口文书档案对象宽度
alert($(document.body).width());//浏览器当前窗口文档body的可观
alert($(document.body).outerWidth(true));//浏览器当前窗口文书档案body的总拉长率 包蕴border padding margin
alert(screen.height);//显示屏分辨率,只好用JavaScript代码获
alert(screen.width);
})
</script>

    width:620px;
    height:420px;
    position:fixed;
    top:50%;
    left:50%;
    margin:-210px 0 0 -310px;
    border-radius:8px; /*圆角*/
    background-color:#999;
    z-index:3;
    display:none;   
}

上边是选择实例代码可供参考
代码

[javascript] 
/*回顾弹层插件*/ 
/*运用验证先河
1.大概利用:
<显示弹层>        ATbox("#alert");    ★必填,要关张弹层名称,ID、Class均可
<关闭弹层>        CDbox("#alert");    ★必填,要关闭弹层名称,ID、Class均可
 
2.高档应用
<呈现弹层>
ATbox(
    "#alert",        ★必填,弹层名称,ID、Class均可
    ".ATclose",    ☆选填,关闭按键,默以为".ATclose"
    "center",        ☆选填,水平地点,默以为居中,接受"left"、"center"、"right"、250、"250px"等数值
    "center",        ☆选填,垂直地点,默以为居中,接受"top"、"middle"、"bottom"、250、"250px"等数值
    "",                    ☆选填,弹层宽度,暗许取该弹层实际拉长率,接受250、"250px"等数值
    "",                    ☆选填,弹层高度,私下认可取该弹层实际中度,接受250、"250px"等数值
    false,            ☆选填,关闭遮罩,默以为false,关闭为true
    "#000",            ☆选填,遮罩颜色,默以为"#000"
    "0.6",            ☆选填,遮罩反射率,暗许为"0.6"
    false,            ☆选填,锁定滚动条,默以为false,锁定为true
    false                ☆选填,点遮罩关闭弹层,默感觉false,启用为true
);
动用表明结束*/ 
/*总结弹层插件*/ 
//(a:ID, b:宽, c:高,d:水平地方, e:垂直地点, f:关闭弹层名称, g:关闭遮罩, h:遮罩颜色, i:遮罩光滑度, j:锁定滚动条, k:点击遮罩关闭弹窗)  
;(function($){ 
    $.AlertBox = { 
//-----------------------------------------弹层展现"_show"------------------------------------------------------------  
        _show:function(a,f,d,e,b,c,g,h,i,j,k,l){ 
            //浏览器决断  
            var browserType = $.browser.msie&&$.browser.version<=6; 
            //遮罩  
            if(!h){h="#000"};//颜色  
            if(!i){i="0.6"};//透明度  
            if(g!=true){ 
                $("body").append('<div id="ATMask"></div>'); 
                var ATMask = $("#ATMask"), 
                        ATMaskIf = ""; 
                if(browserType){ 
                    ATMask.append('<iframe id="ATMaskIf" frameborder="0" scrolling="no"></iframe>'); 
                    ATMaskIf = $("#ATMaskIf"); 
                }; 
                $.AlertBox._mask(ATMask,ATMaskIf,h,i); 
            }; 
            //点击遮罩关闭弹窗(IE6带iframe暂未落到实处)  
            if(k==true&&ATMask){ 
                ATMask.click(function(){ 
                    $.AlertBox._hide(a,ATMask); 
                });     
            }; 
            //锁定滚动条  
            if(j==true){ 
                $("html,body").css({"width":"100%","height":"100%","overflow":"hidden"}); 
                $("body").attr("ATlock","true"); 
            }; 
            //弹层地点  
            $.AlertBox._position(a,b,c,d,e,browserType,0); 
            //绑定窗口变化跟滚动条事件;  
            $.AlertBox._change(true,a,b,c,d,e,ATMask,ATMaskIf,browserType); 
            //关闭弹层名称  
            if(!f){ 
                $(".ATclose").live("click",function(){$.AlertBox._hide(a,ATMask);}); 
            }else{ 
                $(f).live("click",function(){$.AlertBox._hide(a,ATMask);});     
            }; 
            //彰显弹层  
            $(a).show(); 
        }, 
//-----------------------------------------弹层遮掩"_hide"------------------------------------------------------------  
        _hide:function(a,ATMask){ 
            if($("body").attr("ATlock")=="true"){ 
                $("html,body").removeAttr("style"); 
                $("body").attr("ATlock",""); 
            }; 
            if(ATMask){ATMask.remove();}; 
            if(a){$(a).hide();}; 
            $.AlertBox._change(false); 
        }, 
//-----------------------------------------遮罩样式大小"_mask"------------------------------------------------------------  
        _mask:function(ATMask,ATMaskIf,h,i){ 
            ATMask.css({ 
                "position": "absolute", 
                "z-index": 2000000000, 
                "top": 0, 
                "left": 0, 
                "width": "100%",//$(document.body).outerWidth(true)  
                "height": $(document).height(), 
                "background": h, 
                "opacity": i 
            }); 
            if(ATMaskIf){ 
                ATMaskIf.css({ 
                    "position": "absolute", 
                    "z-index": -1, 
                    "top": 0, 
                    "left": 0, 
                    "width": "100%",//$(document.body).outerWidth(true)  
                    "height": $(document).height(), 
                    "opacity": 0 
                });     
            }; 
        }, 
//-----------------------------------------弹层地点"_position"------------------------------------------------------------  
        _position:function(a,b,c,d,e,browserType,speed){ 
            var winWidth = $(window).width(),   
            winHeight = $(window).height(), 
            scrHeight = $(document).scrollTop(), 
            centerWidth, 
            centerHeight; 
            //参数"宽",默许弹层宽度;  
            if(!b){ 
                b=$(a).outerWidth(true); 
            }else{ 
                b=parseInt(b);     
            }; 
            //参数"高",暗许弹层高度;  
            if(!c){ 
                c=$(a).outerHeight(true); 
            }else{ 
                c=parseInt(c);     
            }; 
            //参数"水平地点",私下认可居中;  
            if(d=="right"){ 
                centerWidth = 0; 
                $(a).css({"right":centerWidth,"left":"auto"}); 
            }else{ 
                if(d=="left"){ 
                    centerWidth = 0; 
                }else if(d=="center"||!d){ 
                    centerWidth = (winWidth-b)/2; 
                }else{ 
                    centerWidth = d; 
                }; 
                $(a).css({"left":centerWidth});         
            }; 
            //参数"垂直地点",默许居中;  
            if(e=="top"){ 
                centerHeight = scrHeight; 
            }else if(e=="center"||e=="middle"||!e){ 
                centerHeight = (winHeight-c)/2 scrHeight; 
            }else if(e=="bottom"){ 
                centerHeight = winHeight-c scrHeight;     
            }else{ 
                centerHeight = parseInt(e) scrHeight; 
            }; 
            $(a).css({"z-index":2000000001}); 
            if(browserType){ 
                $(a).css({"position":"absolute"}).stop().animate({"top":centerHeight},speed);     
            }else{ 
                $(a).css({"position":"fixed","top":centerHeight});     
            }; 
        }, 
//-----------------------------------------窗口变化及滚动条"_change"------------------------------------------------------------  
        _change:function(z,a,b,c,d,e,ATMask,ATMaskIf,browserType){ 
            if(z==false){ 
                $(window).unbind("resize",AlertBoxHL_R); 
                $(window).unbind("scroll",AlertBoxHL_S); 
            }else{ 
                $(window).bind("resize", AlertBoxHL_R = function(){ 
                    if(ATMask){ 
                        $.AlertBox._mask(ATMask,ATMaskIf); 
                    }; 
                    $.AlertBox._position(a,b,c,d,e,browserType,"fast"); 
                }); 
                $(window).bind("scroll", AlertBoxHL_S = function(){ 
                    if(browserType){ 
                        $.AlertBox._position(a,b,c,d,e,browserType,"fast");     
                    }; 
                }); 
            }; 
        } 
    }; 
    ATbox = function(a,f,d,e,b,c,g,h,i,j,k,l){ 
        $.AlertBox._show(a,f,d,e,b,c,g,h,i,j,k,l);     
    }; 
    CDbox = function(a){ 
        $.AlertBox._hide(a,$("#ATMask"));     
    }; 
})(jQuery); 

您恐怕感兴趣的稿子:

  • 因此js推断访客荧屏荧屏分辨率并付出提醒
  • js判定显示器分辨率的代码
  • JS推断分歧分辨率调用分裂的CSS样式文件落到实处思路及测量试验代码
  • 依照推断浏览器类型显示器分辨率自动调用不相同CSS的代码
  • 用js自动判别浏览器分辨率的代码
  • 检查测验屏幕分辨率
  • 据他们说分辨率差异,调用差异的css文件

3.遮罩层现身时,页面仍可在此之前后滚动,不过心有余而力不足操作页面中除登录框外的其余因素

<html>
<head>
<style>
body{
font-size:12px;
}
</style>
<script src="" type="text/javascript"></script>
<script type="text/javascript">
(function(){
$.extend($.fn,{
mask: function(msg,maskDivClass){
this.unmask();
// 参数
var op = {
opacity: 0.8,
z: 10000,
bgcolor: '#ccc'
};
var original=$(document.body);
var position={top:0,left:0};
if(this[0] && this[0]!==window.document){
original=this;
position=original.position();
}
// 成立叁个 Mask 层,追加到目的中
var maskDiv=$('<div class="maskdivgen"> </div>');
maskDiv.appendTo(original);
var maskWidth=original.outerWidth();
if(!maskWidth){
maskWidth=original.width();
}
var maskHeight=original.outerHeight();
if(!maskHeight){
maskHeight=original.height();
}
maskDiv.css({
position: 'absolute',
top: position.top,
left: position.left,
'z-index': op.z,
width: maskWidth,
height:maskHeight,
'background-color': op.bgcolor,
opacity: 0
});
if(maskDivClass){
maskDiv.addClass(maskDivClass);
}
if(msg){
var msgDiv=$('<div style="position:absolute;border:#6593cf 1px solid; padding:2px;background:#ccca"><div style="line-height:24px;border:#a3bad9 1px solid;background:white;padding:2px 10px 2px 10px">' msg '</div></div>');
msgDiv.appendTo(maskDiv);
var widthspace=(maskDiv.width()-msgDiv.width());
var heightspace=(maskDiv.height()-msgDiv.height());
msgDiv.css({
cursor:'wait',
top:(heightspace/2-2),
left:(widthspace/2-2)
});
}
maskDiv.fadeIn('fast', function(){
// 淡入淡出效果
$(this).fadeTo('slow', op.opacity);
})
return maskDiv;
},
unmask: function(){
var original=$(document.body);
if(this[0] && this[0]!==window.document){
original=$(this[0]);
}
original.find("> div.maskdivgen").fadeOut('slow',0,function(){
$(this).remove();
});
}
});
})();
</script>
</head>
<body style="width:100%">
测试
<div id="test" style="width:200px;height:100px; border:black 1px solid;">
</div>
<a href="#" onclick="$('#test').mask('DIV层遮罩')">div遮罩</a>
<a href="#" onclick="$('#test').unmask()">关闭div遮罩</a>
<a href="#" onclick="$(document).mask('全屏遮罩').click(function(){$(document).unmask()})">全体遮罩</a>
</body>
</html>

/*简单来讲弹层插件*/
/*动用验证初阶
1.简约利用:
<展现弹层>        ATbox("#alert");    ★必填,要关闭弹层名称,ID、Class均可
<关闭弹层>        CDbox("#alert");    ★必填,要关闭弹层名称,ID、Class均可

网页可知区域宽: document.body.clientWidth
网页可知区域高: document.body.clientHeight
网页可知区域宽: document.body.offsetWidth (包括边线的宽)
网页可知区域高: document.body.offsetHeight (富含边线的高)
网页正文全文宽: document.body.scrollWidth
网页正文全文高: document.body.scrollHeight
网页被卷去的高: document.body.scrollTop
网页被卷去的左: document.body.scrollLeft
网页正文部分上: window.screenTop
网页正文部分左: window.screenLeft
显示屏分辨率的高: window.screen.height
荧屏分辨率的宽: window.screen.width
屏幕可用职业区高度: window.screen.availHeight

1.注册框始终水平、垂直居中,满含鼠标滚轮上下滚动页面、缩放页面和调动浏览器窗口大时辰

复制代码 代码如下:

 

复制代码 代码如下:

你恐怕感兴趣的小说:

  • jQuery操作dom达成弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
  • jQuery阻止移动端遮罩层后页面滚动
  • Jquery达成遮罩层的简短实例(便是弹出DIV附近都灰溜溜不可能操作)
  • jquery达成轻便的遮罩层
  • jquery下促成overlay遮罩层代码
  • jQuery实现弹出带遮罩层的居中浮动窗口功效
  • jQuery遮罩层完成格局实例详解(附遮罩层插件)
  • jquery实现点击任何区域时隐敝下拉div和遮罩层的诀要
  • 轻量级网页遮罩层jQuery插件用法实例
  • jQuery完结张开网页自动掸出遮罩层或点击弹出遮罩层成效示例
  • jQuery超轻易遮罩层实现方式言传身教

] /*大致弹层插件*/ /*行使表达初步1.简练利用: 突显弹层 ATbox(#alert); ★必填,要关闭弹层名称,ID、Class均可 关闭弹层 CDbox(#aler...

CSS:

(function(){
$.extend($.fn,{
mask: function(msg,maskDivClass){
this.unmask();
// 参数
var op = {
opacity: 0.8,
z: 10000,
bgcolor: '#ccc'
};
var original=$(document.body);
var position={top:0,left:0};
if(this[0] && this[0]!==window.document){
original=this;
position=original.position();
}
// 创立三个 Mask 层,追加到指标中
var maskDiv=$('<div class="maskdivgen"> </div>');
maskDiv.appendTo(original);
var maskWidth=original.outerWidth();
if(!maskWidth){
maskWidth=original.width();
}
var maskHeight=original.outerHeight();
if(!maskHeight){
maskHeight=original.height();
}
maskDiv.css({
position: 'absolute',
top: position.top,
left: position.left,
'z-index': op.z,
width: maskWidth,
height:maskHeight,
'background-color': op.bgcolor,
opacity: 0
});
if(maskDivClass){
maskDiv.addClass(maskDivClass);
}
if(msg){
var msgDiv=$('<div style="position:absolute;border:#6593cf 1px solid; padding:2px;background:#ccca"><div style="line-height:24px;border:#a3bad9 1px solid;background:white;padding:2px 10px 2px 10px">' msg '</div></div>');
msgDiv.appendTo(maskDiv);
var widthspace=(maskDiv.width()-msgDiv.width());
var heightspace=(maskDiv.height()-msgDiv.height());
msgDiv.css({
cursor:'wait',
top:(heightspace/2-2),
left:(widthspace/2-2)
});
}
maskDiv.fadeIn('fast', function(){
// 淡入淡出效果
$(this).fadeTo('slow', op.opacity);
})
return maskDiv;
},
unmask: function(){
var original=$(document.body);
if(this[0] && this[0]!==window.document){
original=$(this[0]);
}
original.find("> div.maskdivgen").fadeOut('slow',0,function(){
$(this).remove();
});
}
});
})();

    $(".go").click(function(){
   
        $("#mask").hide();
        $("#rbox").hide();
    });
});

个中有mask()和unmask()那七个格局,那五个格局在钦赐的因素上增加叁个遮罩层和一个唤起音讯达成,扩展客户体验。由于近来做项目标时候,发掘有的时候为了选拔这一七个点子供给引进三个比较“强大”的Extjs进来,感到有个别不划算,于是自身用jquery完成了二个比较轻松mask、unmask方法来贯彻该效用。大家驾驭jquery是多个上佳的javascript框架,不但体积小何况使用方便,笔者未来稳步将系统中使用Extjs达成的代码或营造整体转换来Jquery来兑现。好了十分的少说,上本身的代码,那几个代码是基于英特网的一人朋友完成的documentMask基础上海展览中心开整顿的。使利用上更灵敏方便了。
(没什么本领含量,意在为那么些急需的意中人提供赞助)

2.当缩放页面和调节浏览器窗口大时辰,遮罩层需始终覆盖全体文书档案和充满整个浏览器可视窗口以及必要滚动才干浏览到的局地,要求包容Chrome和IE等差异基础浏览器;

复制代码 代码如下:

本文由乐百家前段发布,转载请注明来源:一天二个js(5)本身编排的弹层插件