登录遮罩及弹出窗口

最新推荐文章于 2021-05-31 09:02:59 发布

数佳

最新推荐文章于 2021-05-31 09:02:59 发布

阅读量273

点赞数

分类专栏： 1.4 前端项目经验文章标签：登录遮罩弹出窗口

本文链接：https://blog.csdn.net/yaocong1993/article/details/82630347

版权

1.4 前端项目经验专栏收录该内容

9 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title></title>
    <style>
        *{margin:0;padding:0;}
        .content{height:1000px;}
        .mask{
            position:fixed;z-index:998;top:0;left:0;
            width:100%;height:100%;
            background:rgba(180,180,180,0.5);
        }
        .login{
            position:relative;
            width:400px;height:300px;margin:100px auto;border:1px solid;
        }
        .login>span{
            position:absolute;top:0;right:0;
            width:50px;height:50px;
            background:#f00;
        }
    </style>
</head>
<body>
    <a href="http://www.baidu.com">点我登录</a>
    <div class="content">我是段落</div>
    <script src='jquery-1.12.4.js'></script>
    <script>
        $(function(){
            $("a").click(function(){
                var $mask=$("<div class=\"mask\">\n"+
                    "    <div class=\"login\">\n"+
                    "        <span></span>\n"+
                    "    </div>\n"+
                    "</div>");
                /* 点击登录后弹出登录窗口 */
                $("body").prepend($mask);
                /* 事件委托（给新增节点添加事件），点击×后关闭登录窗口 */
                $("body").delegate(".login>span","click",function(){
                    $mask.remove();
                });
                /* 阻止默认事件 */
                return false;
            });
        });
    </script>
</body>
</html>

数佳

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
登录遮罩及弹出窗口

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset='UTF-8'&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; *{margin:0;padding:0;} .content{height:1000px;}
复制链接

扫一扫