jquery弹出遮罩层（可随滚动条而移动的）

来源：互联网发布：mac双系统怎么切换系统编辑：程序博客网时间：2024/05/21 09:09

<!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/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery/jquery_last.js" charset="UTF-8"></script>
<script type="text/javascript">
$(function(){
    var mask = $(".mask");
    var box = $(".box");
    $(".link").click(function(){
        mask.show();
        box.show();
        MaskAdapt();
        BoxAdapt();
    });
    $("#closed").click(function(){
        mask.hide();
        box.hide();
    });
    mask.click(function(){
        mask.hide();
        box.hide();
    });
    $(window).scroll(function(){
        BoxAdapt();
    });
    $(window).resize(function(){
        BoxAdapt();
        MaskAdapt();
    });
});
function MaskAdapt(){
    var docWidth = $(document.body).outerWidth(true);
    var docHeight = $(document).height();
    $(".mask").height(docHeight).width(docWidth);
};
function BoxAdapt(){
    var winWidth = $(window).width();
    var winHeight = $(window).height();
    var scrHeight = $(document).scrollTop();
    var boxHeight = $(".box").height();
    var boxWidth = $(".box").width();
    var centerWidth = (winWidth-boxWidth)/2
    var centerHeight = (winHeight-boxHeight)/2+scrHeight
    var offsetHeight = $(".box").offset().top;
    if(offsetHeight < centerHeight){
    //如果想不要跳动效果，就把前面的animate去掉，最后一个animate中100改为0
        $(".box").css("left",centerWidth).stop(true,false).animate({"top":centerHeight*1.1,"left":centerWidth},300).animate({"top":centerHeight*0.95,"left":centerWidth},200).animate({"top":centerHeight,"left":centerWidth},100);
    }else{
        $(".box").css("left",centerWidth).stop(true,false).animate({"top":centerHeight*0.8,"left":centerWidth},300).animate({"top":centerHeight*1.05,"left":centerWidth},200).animate({"top":centerHeight,"left":centerWidth},100);
    };
};
</script>
<style type="text/css">

.mask {position:absolute; left:0; top:0; width:100%; height:100%; background:#000; opacity:0.6;filter:alpha(opacity=60); display:none; z-index:998;}
.box {position:absolute; top:0; left:50%; width:400px; height:200px; background:#993; z-index:999; display:none; padding:20px;}
</style>
<body>
<div style="height:3000px;padding:200px;">
    <a class="link" href="javascript:void(0)">Click here</a>
    <div class="mask"></div>
    <div class="box"><p>I'm dialog box to pop up</p><p>I how so the tragedy, is people pop up</p><p>In fact it, I'll immortals mode</p><input id="closed" type="button" value="close" /></div>
</div>
</body>
</html>