Question

当我使用其他div来做它时，它不会影响其他dom类，所以当我希望整个页面变暗时，我必须修改每个dom类。

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

Answer 1

有一个codepen符合您的需求。（创建一个可忽略的弹出窗口并使视图变暗）

HTML：

<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>

CSS：

.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;
}

使用Javascript：

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

注意：这个作者是@srikarg

Answer 2

您需要显示重叠div

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

使其位置固定

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

并在您想要使页面变暗时使其可见，这是您的工作方式

$(function(){
  //Am hiding the overlay after 2 sec
  $("#overlay").delay(3000).hide(200);
})

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
  <div id="overlay"></div>
  <h1>My Awesome Page</h1>
</body>

Answer 3

您可以使用css：

为您的身体添加background-color

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

演示：http://jsfiddle.net/6gahqaej/2

我如何使整个页面变暗？（html）

3 个答案:

我如何使整个页面变暗？ （html）

3 个答案:

我如何使整个页面变暗？（html）