个人博客
专注IT梦想的地方

做的一个前端自适应遮罩层登录框效果

直接上代码吧

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>遮罩层登录框Demo</title>
        <style media="screen">
            body{font-family: 'Microsoft Yahei'; background-color: #eaf0f2;}
            body,ul{margin: 0; padding: 0;}
            ul{list-style: none;}
            a{text-decoration: none;}
            .g_content{background-color: #fff; width: 100%; height: 80px; box-shadow:0 2px 6px #ddd;}
            nav{width: 1200px; display: block; margin: 0 auto; height: 80px; }
            nav ul li{float: left; padding: 0 20px; height: 80px;}
            nav ul li a{line-height: 80px; color: #f66}
            .nav-right{float: right; font-size: 12px; line-height: 80px;}
            .nav-right a{color: #f66;}
            #mask{position: fixed; z-index: 98; left: 0; top: 0; background-color: rgba(0,0,0,0.3); width: 100%; height: 100%; display: none;}
            #login{border: 5px solid rgba(0,0,0,0.6); border-radius: 3px; width: 500px; height: 300px;background-color: #fff; position: fixed; z-index: 99; animation: zhiyan 0.1s; display: none;}
            @keyframes zhiyan {
                0%{border: 50px solid rgba(0,0,0,0.5) }
                100%{border: 5px solid rgba(0,0,0,0.5)}
            }
            form{text-align: center; margin-top: 60px;}
            input{width: 180px; height: 30px; margin: 10px 0; border: 2px solid #ddd; padding: 0 10px;}
            input[type=submit]{border: 2px solid #f66; background-color: #f66; color: #fff; width: 200px; cursor: pointer;}
        </style>
    </head>
    <body>
        <div class="g_content">
            <nav class="nav">
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">前端</a></li>
                    <li><a href="#">后台</a></li>
                    <li><a href="https://www.asni.cn/" title="智言个人博客">个人博客</a></li>
                </ul>
                <div class="nav-right">
                    <a href="javascript:;" id="buts">我要登录</a>
                </div>
            </nav>
        </div>
        <div id="mask"></div>
        <div id="login">
            <form class="form" action="index.html" method="post">
            <input type="text" name="user" placeholder="用户名"><br>
            <input type="password" name="psw" placeholder="密码"><br>
            <input type="submit" name="" value="登录一下">
            </form>
        </div>
 <script type="text/javascript">
    let buts = document.getElementById('buts');
    let g_content = document.getElementById('g_content');
    let mask = document.getElementById('mask');
    let login = document.getElementById('login');
    let sWidth = document.documentElement.clientWidth;
    let sHeight = document.documentElement.clientHeight;
    let oWidth;
    let oHeight;
    let flag = true;
    window.onresize = function() {
        sWidth = document.documentElement.clientWidth;
        sHeight = document.documentElement.clientHeight;
        oWidth = (sWidth - login.clientWidth - 10)/2;
        oHeight = (sHeight - login.clientHeight - 10)/2;
        if (!flag) {
            setMaskStyle();
            setLoginStyle();
        }
    }
    function setMaskStyle() {
        mask.style.display = 'inline-block';
        mask.style.height = sHeight + 'px';
    }
    function setLoginStyle() {
        oWidth = (sWidth - login.clientWidth - 10)/2;
        oHeight = (sHeight - login.clientHeight - 10)/2;
        login.style.left = oWidth + 'px';
        login.style.top = oHeight + 'px';
    }
    buts.addEventListener('click', function(e) {
        if (flag) {
            setMaskStyle();
            login.style.display = 'inline-block';
            setLoginStyle();
        flag = false;
        }
    });
    mask.addEventListener('click', function(e) {
        mask.style.display = 'none';
        flag = true;
        login.style.display = 'none';
    });
</script>
    </body>
</html>

代码没有做优化,直接根据思想步骤来写的,所以大家可以自行优化。这个DEMO采用自适应,可以直接使用。

DEMO地址:https://www.asni.cn/demo/demo5/

赞(2) 打赏
未经允许,不得转载本站任何文章:智言个人博客 » 做的一个前端自适应遮罩层登录框效果

评论 1

评论前必须登录!

 

  1. #0

    这个好,正需要,帮我解决了问题,感谢!

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏