弹出登录框(可直接修改样式使用)

最新推荐文章于 2023-08-05 08:47:10 发布

kuke_kuke

最新推荐文章于 2023-08-05 08:47:10 发布

阅读量1.1k

点赞数

分类专栏：小应用文章标签： web前端

本文链接：https://blog.csdn.net/qq_33599109/article/details/76574004

版权

小应用专栏收录该内容

3 篇文章 0 订阅

订阅专栏

弹出登录框小应用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <script>
        window.onload = function(){
            var login = document.querySelector('#login');
            var close = document.querySelector('#close');
            var mask = document.querySelector('.login-mask');
            login.onclick = function(){
                mask.style.display = "block";
            }
            close.onclick = function(){
                mask.style.display = "none";
            }
        }
    </script>
    <style>
    *{
        margin: 0;
        padding: 0;
    }

        .login-mask{
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            background-color: rgba(0,0,0,0.5);
            display: none;
        }
        .login-mask .login-box{
            width: 270px;
            height: 200px;
            border: 1px solid #000;
            position: fixed;
            left: 50%;
            margin-left: -150px;
            top: 50px;
            background-color: #fff;
            border-radius: 20px;
            padding-left: 30px;
            padding-top: 100px;
        }

    </style>
</head>
<body>
<button id="login">点击登录</button>
<div class="login-mask">
    <div class="login-box">
        用户名:<input type="text" /><br /><br />
        密&nbsp;&nbsp;码:<input type="text" /><br /><br />
        <button id="close">取消</button>
    </div>  
</div>
</body>
</html>