动态的给容器添加蒙版效果的弹出层

创建测试HTML 结构

<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="在这里输入内容">
                </label>
            </div>
            <div>
                <label>
                    <input type="text" class="demo" placeholder="在这里输入内容">
                </label>
            </div>
            <div>
                <label>
                    <input type="text" class="demo" placeholder="在这里输入内容">
                </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;
}

实现 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';
}

初始隐藏蒙版的效果

可以编辑输入框文字

显示蒙版后的效果

不可编辑输入框文字

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 10,857评论 0 33
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 1,002评论 0 2
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 8,379评论 1 84
  • 在这个世界上,我们向所爱之人所表达的最深情的誓言莫过于想要和对方“白头到老”。我们的人生之路就是从懵懵懂懂的青春少...
    白羊先生阅读 226评论 1 5
  • 春种夏长,秋收冬藏。夏天万物生长,孜孜不倦地展示着自己的生命力。路边的绿意浓郁的大树和妖娆热烈的野草,还有花园里姹...
    萧萧归去阅读 32评论 0 0