創(chuàng)建測試HTML 結(jié)構(gòu)

<div class="content">
    <div class="btn-content">
        <button class="show-btn" onclick="showPopView()">顯示蒙版</button>
        <button class="hide-btn" onclick="hidePopView()">隱藏蒙版</button>
    </div>

    <div class="view-content">
        <div class="pop-view" id="pop_view"></div>

        <div class="input-view">
            <div>
                <label>
                    <input type="text" class="demo" placeholder="在這里輸入內(nèi)容">
                </label>
            </div>
            <div>
                <label>
                    <input type="text" class="demo" placeholder="在這里輸入內(nèi)容">
                </label>
            </div>
            <div>
                <label>
                    <input type="text" class="demo" placeholder="在這里輸入內(nèi)容">
                </label>
            </div>

        </div>
    </div>

</div>

CSS 樣式編寫

.content {
    width: 800px;
    height: 600px;
    margin: 0 auto;
    text-align: center;
    position: relative;
}

.btn-content {
    height: 50px;
    line-height: 50px;
}
    
.view-content {
    position: absolute;
    top: 50px;
    width: 100%;
    height: 100%;
}

.input-view {
    width: 100%;
    height: 100%;
}

.pop-view {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    opacity: 0.5;
    width: 100%;
    height: 100%;
    background-color: #999;
    filter: alpha(opacity=50);
    display: none;
}

實現(xiàn) JS 切換方法

function showPopView() {
    let popView = document.getElementById('pop_view');
    popView.style.display = 'block';
}

function hidePopView() {
    let popView = document.getElementById('pop_view');
    popView.style.display = 'none';
}

初始隱藏蒙版的效果

可以編輯輸入框文字

顯示蒙版后的效果

不可編輯輸入框文字