html+css+js实现遮罩

使用原生js操作DOM元素实现一个全屏遮罩。使用position:fixed定位，使透明的页面在最上层，且显示一个点击对话框。

1、html代码

 <!-- 遮罩 -->
    <div class="mask">
        <div class="mask-info">
            <!-- 提示信息 -->
            <span>点击[确认]按钮XXX,点击[取消]按钮XXX!点击空白区域退出</span>
            <div>
                <button class="confirm">确认</button>
                <button class="cancel">取消</button>
            </div>
        </div>
    </div>

2、css代码

 /* 遮罩 */
    .mask {
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(160, 160, 160, .6);
        display: flex;
        justify-content: center;
        align-items: center;
        /* display: none; */
    }

    .mask-info {
        width: 200px;
        height: 120px;
        background-color: white;
        border: 1px solid black;
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .mask-info span {
        font-size: 14px;
        color: blue;
        box-sizing: border-box;
        display: inline-block;
        width: 200px;
        flex: 1;
        /* border: 1px solid black; */
        padding: 20px;
        text-align: center;
    }

    .mask-info div {
        margin-bottom: 20px;
    }

    .confirm {
        margin-right: 10px;
        cursor: pointer;
    }

    .cancel {
        cursor: pointer;
    }

2、js代码

let maskEl = document.querySelector( ".mask" );
    let confirmBtn = maskEl.querySelector( ".confirm" );
    let cancelBtn = maskEl.querySelector( ".cancel" );
    let hintEl = maskEl.querySelector( ".mask-info span" );

    //  出现遮罩
    maskEl.style.display = "flex";
    maskEl.onclick = ( e ) => {
        let target = e.target;
        // console.log(target);
        if ( target.matches( ".confirm" ) ) {
            maskEl.style.display = "none";
            //   执行相应操作

        } else if ( target.matches( ".cancel" ) ) {
            maskEl.style.display = "none";
            return;
        } else if ( !target.matches( ".mask-info" ) ) {
            maskEl.style.display = "none";
            return;
        }
    };

效果