我如何变暗整个页面？ （html） [英] How do i darken the whole page? ( html )

问题描述

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

有没有办法将整个文档与灰色透明平面重叠？ 有一个 codepen 充实您的需求。 （创建一个可以忽略的弹出窗口并调暗视图）

HTML：

 < div class =wrapper> 
< button class =btn btn-success dim>变暗页面< / button> 
< div class =dimmer> 
< span class =exit>& times;< / span> 
< / div> 
< div class =content> 
 
 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 neucion labore ullam dicta delectus aspernatur odio ipsi。 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> 
 
 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 neucion labore ullam dicta delectus aspernatur odio ipsi。 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; 
宽度：80％; 
} 
 
 .dimmer {
 display：none; 
背景：＃000; 
不透明度：0.5; 
位置：固定; 
 top：0; 
剩下：0; 
宽度：100％; 
身高：100％; 
 z-index：100; 
} 
 
 .dim {
 display：block; 
保证金：2em auto; 
 z-index：200; 
} 
 
 .exit {
 font-size：100px; 
颜色：红色; 
位置：绝对; 
 top：2px; 
 left：2px; 
 opacity：1; 
光标：指针; 
 
  

Javascript：

  $（function（）{
 var dimmerButton = $（'。dim'）; 
 var dimmer = $（'。dimmer'）; 
 var exit = $（'。exit'）; 
 dimmerButton.on（'click'，function（）{
 dimmer.show（）; 
}）; 
 exit。 on（'click'，function（）{
 dimmer.hide（）; 
}）; 
}）; 
  

注意：作者是@srikarg

When i use an other div to do it, it will not affect other dom classes, so i have to modify each dom class when i want the whole page to get darker.

Is there a way to overlap the whole document with a gray transparent plane?

解决方案

There is a codepen ilustrating your needs. (creating a dismissable popup and dimming the view)

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();
  });
});

Note: The author of this is @srikarg

这篇关于我如何变暗整个页面？ （html）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！