css 模态框

 

居中显示模态框

<style>
body {
    height:1200px;
}
#alert-box {
    display:table;
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    z-index:9999;
    background:rgba(0,0,0,0.5);
}
.alert {
    text-align:center;
    display:table-cell;
    vertical-align:middle;
}
.alert input {
    width:200px;
    height:30px;
    line-height:30px;
}
b {
    font-size:30px;
    color:#FF8400;
    cursor:pointer;
}
button {
    cursor:pointer;
}
</style>




<b id='import_employee'>点我出现登录模态框</b>
<div id="alert-box">
    <div class="alert">
        <p><input type="text" placeholder="请输入用户名" value="admin"></p>
        <p><input type="password" placeholder="请输入密码"></p>
        <button>登录</button>
    </div>
</div>



<script>
let importEmployeeBtn = document.getElementById("import_employee");

importEmployeeBtn.onclick = ()=>{
    document.getElementById("alert-box").style.display = "table";
};

document.getElementById("login").onclick = ()=>{
    document.getElementById("alert-box").style.display = "none";
};




</script>

 

 

 

 

全屏模态框

        <style>
            #alert-box {
                display:table;
                width:100%;
                height:100%;
                position:fixed;
                top:0;
                bottom:0;
                left:0;
                right:0;
                z-index:1;
                background:rgba(0,0,0,0.5);
            }
            #alert-box .alert {
                display:table-cell;
                vertical-align:middle;

            }

            #alert-box .alert .base-content {
                max-height: 100%;
                max-width: 60%;
                margin: auto;
                background-color: #0c1a3f;

            }
            #alert-box .alert .base-content input {
                width:200px;
                height:30px;
                line-height:30px;
            }
        </style>


        <div id="alert-box">
            <div class="alert">
                <div class="base-content">
                    fsdafksakg'as
                <p><label><input type="text" placeholder="请输入用户名" value="admin"></label></p>
                <p><label><input type="password" placeholder="请输入密码"></label></p>
                <button>登录</button>
                </div>

            </div>
        </div>

        <script>

            // import_employee
            let importEmployeeBtn = document.getElementById("import_employee");
            importEmployeeBtn.onclick = ()=>{
                document.getElementById("alert-box").style.display = "table";
            };

            $('button').on('click', function() {
                document.getElementById("alert-box").style.display = "none";
            });
        </script>