点击弹出div内容包括遮罩层

效果：

 

 

HTML：

<!-- 添加分组按钮 -->

            <div class="group_add" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">

                <div class="group_add_icon">+</div>

                <div class="group_add_title">添加分组</div>

            </div>

            <!-- 遮罩层 -->

            <div id="light" class="content_box">

                <div class="content_box_one">添加分组</div>

                <div class="content_box_two">请输入新的分组名称</div>

                <div class="content_box_three">

                    <input type="text" placeholder="请输入分组名称" type="text" class="content_box_three_input">

                </div>

                <div class="content_box_four">

                    <div class="content_box_four_btn1" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">取消</div>

                    <div class="content_box_four_btn2">确定</div>

                </div>

            </div>

            <div id="fade" class="black_overlay" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"></div>

 

 

CSS（弹出内容、遮罩层样式）

/* 遮罩层 */

.black_overlay{

    display: none;

    position: absolute;

    top: 0%;

    left: 0%;

    width: 100%;

    height: 100%;

    background-color: black;

    z-index: 98;

    -moz-opacity: 0.8;

    opacity:.30;

    filter: alpha(opacity=88);

}

.content_box {

    display: none;

    position: absolute;

    overflow: auto;

    width: 76vw;

    height: 40vw;

    background-color: #fff;

    top: 34%;

    left: 12vw;

    z-index: 99;

}

.content_box_one {

    display: flex;

    flex-direction: row;

    align-items: center;

    justify-content: center;

    font-size: 16px;

    /* font-weight: bold; */

    letter-spacing: 1px;

    margin-top: 3vw;

    text-shadow: 0 0 1px #000;

}

.content_box_two {

    font-size: 14px;

    letter-spacing: 1px;

    display: flex;

    flex-direction: row;

    align-items: center;

    justify-content: center;

    margin-top: 1vw;

}

.content_box_three {

    width: 80%;

    height: 8vw;

    margin-left: 10%;

    background-color: #ecf6f9;

    border-radius: 20vw;

    display: flex;

    flex-direction: row;

    align-items: center;

    justify-content: center;

    margin-top: 2vw;

}

.content_box_three_input {

    background-color: #ecf6f9;

    outline: none;

    border: none;

    width: 84%;

    /* height: 26px; */

    /* margin-top: 3px; */

    /* margin-left: 5%; */

    font-size: 14px;

    letter-spacing: 1px;

}

.content_box_three_input::-webkit-input-placeholder {

    color: rgb(136, 136, 136);

    font-size: 14px;

}

.content_box_three_input:focus {

    color: #000;

    font-size: 14px;

}

.content_box_three_input:focus{

    border:none;

    font-size: 14px;

}

.content_box_four {

    width: 60vw;

    display: flex;

    flex-direction: row;

    margin-top: 5vw;

    margin-left: 8vw;

}

.content_box_four_btn1 {

    width: 12vw;

    background-color: #fff;

    border: 1px solid rgb(156, 156, 156);

    color: #000;

    margin-left: 12vw;

    display: flex;

    flex-direction: row;

    align-items: center;

    justify-content: center;

    padding: 0.5vw 0;

    border-radius: 1.5vw;

}

.content_box_four_btn2 {

    width: 12vw;

    background-color: #00b3a8;

    border: 1px solid rgb(156, 156, 156);

    color: #fff;

    margin-left: 12vw;

    display: flex;

    flex-direction: row;

    align-items: center;

    justify-content: center;

    padding: 0.5vw 0;

    border-radius: 1.5vw;

}

 

 

 

 

参考来源：https://www.jb51.net/article/112380.htm