Javascript 如何使整页变暗？（html）

当我使用另一个div时，它不会影响其他dom类，因此当我希望整个页面变暗时，我必须修改每个dom类

---

有没有办法将整个文档与灰色透明平面重叠？

您可以使用css将背景色添加到正文中：

#overlay {
    background-color: rgba(0,0,0,0.5); /* your color */
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
}

---

演示：

您需要显示一个覆盖div

<div id="overlay"></div>

当你想使页面变暗时，让它可见，下面是你如何做到的

$（函数（）{
//我在2秒后隐藏覆盖层
$（“#覆盖”）。延迟（3000）。隐藏（200）；
})

#覆盖{
背景色：rgba（0,0,0,0.5）；
位置：固定；
左：0；
排名：0；
宽度：100%；
身高：100%；
}

我的精彩页面

这里有一个说明您需要的文件。（创建可撤销弹出窗口并使视图变暗）

HTML:

Javascript:

$(function() {
  var dimmerButton = $('.dim');
  var dimmer = $('.dimmer');
  var exit = $('.exit');
  dimmerButton.on('click', function() {
    dimmer.show();
  });
  exit.on('click', function() {
    dimmer.hide();
  });
});

---

注意：本文作者是@srikarg

谢谢，问题是当我将整个页面变暗时，我需要显示一个正常不透明度的弹出窗口。变暗的页面表示用户应该只关注弹出的窗口。谢谢！这正是我所需要的：）不透明度的处理方式使较暗的容器变得不理想的透明。您可能希望使用

rgba（0,0,0,0.5）。
<div class="wrapper">
  <button class="btn btn-success dim">Dim the page!</button>
  <div class="dimmer">
    <span class="exit">&times;</span>
  </div>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum vel itaque fuga fugit fugiat enim excepturi nihil aperiam soluta ex nemo quam consectetur blanditiis dolores quisquam temporibus voluptatem veritatis distinctio neque labore ullam dicta delectus aspernatur odio ipsam. Sit est tempora odit neque fuga sapiente velit aliquid dignissimos ratione perspiciatis animi ullam incidunt veritatis quo eligendi esse aperiam qui vitae praesentium nam! Necessitatibus sequi maiores facere non numquam nesciunt veniam dignissimos aperiam consectetur saepe excepturi mollitia id tempora vero labore ducimus impedit iusto perspiciatis aliquam optio distinctio debitis quibusdam nulla dicta repellat praesentium ullam cupiditate totam soluta voluptatibus blanditiis recusandae!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum vel itaque fuga fugit fugiat enim excepturi nihil aperiam soluta ex nemo quam consectetur blanditiis dolores quisquam temporibus voluptatem veritatis distinctio neque labore ullam dicta delectus aspernatur odio ipsam. Sit est tempora odit neque fuga sapiente velit aliquid dignissimos ratione perspiciatis animi ullam incidunt veritatis quo eligendi esse aperiam qui vitae praesentium nam! Necessitatibus sequi maiores facere non numquam nesciunt veniam dignissimos aperiam consectetur saepe excepturi mollitia id tempora vero labore ducimus impedit iusto perspiciatis aliquam optio distinctio debitis quibusdam nulla dicta repellat praesentium ullam cupiditate totam soluta voluptatibus blanditiis recusandae!</p>
  </div>
</div>

.wrapper {
  padding: 2.5em;
  margin: 0 auto;
  width: 80%;
}

.dimmer {
  display: none;
    background: #000;
    opacity: 0.5;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
}

.dim {
  display: block;
  margin: 2em auto;
  z-index: 200;
}

.exit {
  font-size: 100px;
  color: red;
  position: absolute;
  top: 2px;
  left: 2px;
  opacity: 1;
  cursor: pointer;
}

$(function() {
  var dimmerButton = $('.dim');
  var dimmer = $('.dimmer');
  var exit = $('.exit');
  dimmerButton.on('click', function() {
    dimmer.show();
  });
  exit.on('click', function() {
    dimmer.hide();
  });
});