JQuery之编写弹窗

演示地址：http://sandbox.runjs.cn/show/irefekbs
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{ margin: 0; padding: 0;}
    #login { z-index:9999; height: 200px; width: 300px; background: #ccc; padding-top: 30px; box-shadow: 0 0 20px rgba(0,0,0, 0.2); border-radius: 5px; position: absolute; /*top: 225px; left: 500px;*/}
    #login p { margin: 10px auto; width: 250px; }
    #login p:nth-child(1) { margin-top: 50px; }
    #close { position: absolute; top: 10px; right: 10px; cursor: pointer;}
    #loading-mask {position: absolute; top: 0; left: 0; /* 100%; height: 1030px;*/ background: rgba(0,0,0, 0.4);}
    </style>
    <script type='text/javascript' src='http://files.cnblogs.com/littledu/littledu.js'></script>
    <script>
    $(function(){
        $('#open').click(function(){

                //遮罩层
                var mask = $('<div id="loading-mask"></div>');

                mask.css('width', $('body').width());
                mask.css('height', $('body').height());
                $('body').append(mask);

                //弹窗
                var oLogin = $('<div id="login"><p>用户名：<input type="text"></p><p>密&nbsp;码：<input type="text"></p><div id="close">X</div></div>');

                $('body').append(oLogin);

                //设置弹窗的显示位置
                oLogin.css('left', ($(window).width() - oLogin.width())/2 );
                oLogin.css('top', ($(window).height() - oLogin.height())/2 );

                //浏览器窗口或滚动条改变时
                $(window).on('resize scroll', function(){

                    oLogin.css('left', ($(window).width() - oLogin.width())/2 + $(window).scrollLeft());
                    oLogin.css('top', ($(window).height() - oLogin.height())/2 + $(window).scrollTop());
                });

                //移除遮罩和弹窗
                $('#close').click(function(){

                    mask.remove();
                    oLogin.remove();

                });
            });
    });
    

</script>
</head>
<body style="height:1000px;">
<!-- <div id="loading-mask"></div> -->
<input type="button" value="弹窗" id="open">    
<!-- <div id="login">
    <p>用户名：<input type="text"></p>
    <p>密&nbsp;码：<input type="text"></p>
    <div id="close">X</div>
</div> -->

</body>
</html>