码迷,mamicode.com
首页 > Web开发 > 详细

JQuery之编写弹窗

时间:2015-09-05 23:34:14      阅读:228      评论:0      收藏:0      [点我收藏+]

标签:

<!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; /*width: 100%; height: 1030px;*/ background: rgba(0,0,0, 0.4);}
    </style>
    <script type=‘text/javascript‘ src=‘http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.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 );
                    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>

 

JQuery之编写弹窗

标签:

原文地址:http://www.cnblogs.com/jasontoyell/p/4784099.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!