弹出框的原理

html源代码

doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>popWindowtitle>
<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>
    
    
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 = '
'; //遮罩层的宽度 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;
}

 

转载于:https://www.cnblogs.com/littlefly/p/3693071.html

你可能感兴趣的:(弹出框的原理)