Question

我有一个工作侧边栏菜单，点击后会打开。但是，由于网站有许多元素，背景叠加效果不高效。这里的JS负责将背景颜色添加到不透明度为0.4

function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
    document.getElementById("mainbody").style.marginRight = "0";
    jQuery("body").addClass("mySidenav_intro");
    document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}

点击时;页面正文改为

<body id="mainbody" class="mySidenav_intro" style="margin-right: 0px; background-color: rgba(0, 0, 0, 0.4);">

但是，它仅更改网站的背景颜色。我想在打开时创建一个像模态一样的叠加层。我该怎么做到这一点？

Answer 1

而不是改变身体的背景颜色，你想要的是一个以不透明度位于顶部的元素，例如使用方法here。

最简单的，你可以使用类overlay的div，使用JS在其上触发enabled类，并使用CSS：

.overlay {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  background-color: rgba(0,0,0,0.9);
}
.overlay.enabled {
  display: initial;
}

默认情况下，这将涵盖所有内容，以防止其覆盖侧边栏，只需确保其z-index高于叠加层（即2）。

侧边栏菜单打开时添加正文叠加层

1 个答案: