javascript – 如何让整个页面变暗？ (html)

发布时间：2020-12-14 23:10:41 所属栏目：资源来源：网络整理

导读：当我使用其他div来做它时,它不会影响其他dom类,所以当我希望整个页面变暗时,我必须修改每个dom类. 有没有办法将整个文档与灰色透明平面重叠？最佳答案有一个codepen ilustrating您的需求. (创建一个可忽略的弹出窗口并使视图变暗) HTML： CSS： .wrapper {

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

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

最佳答案

有一个codepen ilustrating您的需求. (创建一个可忽略的弹出窗口并使视图变暗)

HTML：


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


                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!