• 弹出框的原理


    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;
    }
  • 相关阅读:
    poj2253 青蛙
    这代码真是好,真是文艺,转来的
    java.text.MessageFormat
    java多线程的两种实现方式
    javascript with
    面向接口编程
    java 多线程 读写锁
    java 多线程 资源共享
    UML:继承、实现、依赖、关联、聚合、组合
    javascript 语言精粹 学习笔记
  • 原文地址:https://www.cnblogs.com/littlefly/p/3693071.html
Copyright © 2020-2023  润新知