模态对话框 | 易学教程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }
        #div1{
            position: fixed;
            z-index: 1000;
            width: 100%;
            background-color: #efeef0;
            height: 800px;

        }
        #div2{


            background-color: #b7e692;
            opacity: 0.2;/* 设置透明度 */
            position: fixed; /*  定位 */
            z-index: 1001; /* 定位以后用它来控制层级*/
            top:0;
            left: 0;
            right: 0;
            bottom: 0; /* 目的是让透明层 布满整个屏幕 */
            width: 100%;

        }
        #div3{

            height: 200px;
            width: 400px;
            background-color: #f0687f;
            position: absolute; /* 坐标定位*/
            z-index: 1002;
            top: 50%;
            left:50%;
            margin-top: -100px; /* 50% 不能实现居中，这样做细微控制*/
            margin-left: -200px;
        }
        .hid{
            display: none;
        }
    </style>
</head>

<body>
<div id="div1">
    <input type="button" value="aaa" onclick="show()">
</div>
<div id="div2" class="hid"></div>
<div id="div3" class="hid">
    <input type="button" value="取消" onclick="cancel()">
</div>
<script>
function show() {
    var ele=document.getElementById("div2");
    ele.classList.remove("hid")
    var ele1=document.getElementById("div3");
    ele1.classList.remove("hid")
}
function cancel() {
var ele=document.getElementById("div3");
var ele1=document.getElementById("div2");
ele.classList.add("hid")
    ele1.classList.add("hid")
}
</script>


</body>
</html>
来源：CSDN
作者：9Khan
链接：https://blog.csdn.net/weixin_45943458/article/details/103830586
标签
模态对话框