弹出框的原理

html源代码

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>popWindow</title>
<link rel="stylesheet" href="pop.css">
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<script src="pop.js"></script>
</head>
<body>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <a href="javascript:;" id="show">显示窗口</a>
    <div class="popWindow hide">
        <h3>弹出窗口的标题<span>关闭</span></h3>
        <div class="content">弹出窗口的内容</div>
    </div>
    <!-- <div class="mask hide"></div> -->
    <!-- mask是遮罩层，不过不推荐这种做法 -->
</body>
</html>

js代码

$(function(){
    var oBtn = $('#show');
    var popWindow = $('.popWindow');
    var oClose = $('.popWindow h3 span');

    //获得浏览器可视区域的宽和高
    var browserWidth = $(window).width();
    var browserHeight = $(window).height();

    //获得浏览器纵向滚动条距离上边界的值
    var browserScrollTop = $(window).scrollTop();

    //获得弹出窗口的宽和高
    //outerWidth(true)加参数true可以获得元素的真实宽度，包括padding,margin,border的值
    var popWindowWidth = popWindow.outerWidth(true);
    var popWindowHeight = popWindow.outerHeight(true);

    //获得弹出窗口的最终位置
    var positionLeft = browserWidth/2 - popWindowWidth/2;
    var positionTop = browserHeight/2 - popWindowHeight/2 + browserScrollTop;

    var oMask = '<div class="mask"></div>';
    //遮罩层的宽度
    var maskWidth = $(document).width();
    //遮罩层的高度
    var maskHeight = $(document).height();

    oBtn.click(function(){
        popWindow.show().animate({
            'left':positionLeft+'px',
            'top':positionTop+'px'
        },500);

        $('body').append(oMask);
        $('.mask').width(maskWidth).height(maskHeight);
    });


    //改变浏览器窗口大小
    $(window).resize(function(){
        if(popWindow.is(':visible')){
            browserWidth = $(window).width();
            browserHeight = $(window).height();
            positionLeft = browserWidth/2 - popWindowWidth/2;
            positionTop = browserHeight/2 - popWindowHeight/2 + browserScrollTop;
            popWindow.animate({
                'left':positionLeft+'px',
                'top':positionTop+'px'
            },500).dequeue();      //dequeue执行的时候，执行匹配元素队列的下一个函数，可以理解为直接跳到动画末尾
        }
    });

    //浏览器滚动条滚动的时候
    $(window).scroll(function() {
        if(popWindow.is(':visible')){
            browserScrollTop = $(window).scrollTop();
            positionTop = browserHeight/2 - popWindowHeight/2 + browserScrollTop;
            popWindow.animate({
                'left':positionLeft+'px',
                'top':positionTop+'px'
            },500).dequeue();
        }
        
    });

    oClose.click(function() {
        popWindow.hide();
        $('.mask').remove();
    });
});

css代码

*{
    margin: 0;
    padding: 0;
}

.hide{display: none;}

.popWindow{
    width: 300px;
    height: 300px;
    background: #abcdef;
    padding: 2px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    /*border:2px solid #abcdef;*/
}
.popWindow h3{
    height: 30px;
    line-height: 30px;
}

.popWindow h3 span{
    float: right;
    font-size: 14px;
    font-weight: normal;
}

.popWindow h3 span:hover{
    color: #f00;
    cursor: pointer;
}
.popWindow .content{
    height: 270px;
    background: #fff;
}
.mask{
    background: #000;
    opacity: 0.4;
    filter:alpha(opacity=40);
    position: absolute;
    left: 0;
    top:0;
    z-index: 1;
}

 

posted @ 2014-04-26 23:06  little fly  阅读(493)  评论(0)  编辑  收藏  举报