一、模态框

模态框用的是固定定位设置z-index值来实现，

要注意z-index的值，要始终保持模态框的对话框z-index是在最大。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通用模态框</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .container{
            visibility: hidden;
        }
        .bg{
            position: fixed;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,.3);
            z-index: 1000;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }
        .dialog-box{
            position: fixed;
            width: 300px;
            height: 300px;
            background-color: white;
            top: 50%;
            left: 50%;
            transform: translate(-150px,-150px);
            z-index: 1001;
            border-radius: 5px;
        }
        .exit{
            width: 30px;
            height: 30px;
            float: right;
            background-color: darkgreen;
            border-radius: 5px;
            text-align: center;
            line-height: 30px;
            cursor: pointer;
        }
        .exit:hover{
            background-color: red;
            color: #ffffff;
        }
    </style>
</head>
<body>
    <button id="btn">点击出现模态框</button>
    <div id="container" class="container">
        <div class="bg"></div>
        <div class="dialog-box">
            <a id="exit" class="exit">x</a>
        </div>
    </div>
</body>
</html>

<script type="text/javascript">
    function $(id) {
        return document.getElementById(id);
    }
    window.onload=function () {
        $('btn').onclick=function () {
            $('container').style.visibility='visible';
        };
        $('exit').onclick=function () {
            $('container').style.visibility='hidden';
        };
    }
</script>

View Code

小Demo：模态框

一、模态框

猜你喜欢