弹框遮盖 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            position: absolute;
            width: 500px;
            height: 130px;
            background-color: #fff;
            text-align: center;
            top: 38%;
            left: 28.2%;
            align-items: center;
            display: none;
        }
        /*按钮样式*/
        
        input {
            background: #eee;
            width: 100px;
            height: 50px;
            line-height: 50px;
            border-radius: 10px;
            position: absolute;
            text-align: center;
            margin: 20% 45%;
        }
        
        .qied {
            width: 90px;
            height: 30px;
            border-radius: 25px;
            border: 0;
            background: #FF5F19;
        }
        
        .box p {
            font-size: 12px;
            color: #7E7E7E;
        }
        
        .spa {
            border: 2px solid rgb(250, 250, 250);
            border-radius: 50%;
            position: absolute;
            right: 3%;
            width: 17px;
            height: 17px;
            font-size: 12px;
        }
        
        #da span {
            margin-top: 9px;
        }
        
        .spaa {
            position: absolute;
            margin-left: -14px;
        }
        
        #test {
            position: static;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.4);
        }
        
        .qied,
        .spa,
        .spaa {
            color: #eee;
        }
    </style>
</head>

<body>
    <input type="button" id="dain" value="点我">

    <div id="test">
        <div class="box" id="da">
            <div style="background:#FF5F19;height:40px;">
                <span class="spaa">提示</span>
                <strong> <span class="spa">x</span></strong></div>
            <p>账号或密码输入错误</p>
            <button class="qied">确定</button>
        </div>
    </div>

    <script src="../../js/jquery-3.6.0.js"></script>
    <script>
        var box = document.getElementById('da');
        var test = document.getElementById('test')
        $('#dain,.test').click(function() {
            box.style.display = "block";
            test.style.position = 'fixed';
        })
        $('.spa,.qied,.test').click(function() {
            box.style.display = "none";
            test.style.position = 'static';

        })
    </script>
</body>

</html>

　　

Document

提示 x

账号或密码输入错误

posted @ 2022-03-22 09:31  33的男孩  阅读(23)  评论(0)    收藏  举报