Question

我不是真的在寻求我的代码帮助，我更想问，你是怎么做到的？

当你点击我的div时，屏幕会变黑，但是我希望我的div下面仍然显示为正常，但是剩下的区域会变黑。

function lightsout() {
  document.getElementById("lightsout").style.visibility = "visible";
}

<div style="width:100px;height:100px;border:2px solid blue" onclick="lightsout()">Click Me</div>

<div id="lightsout" style="position:fixed;top:0;left:0;width:100%;height:100%;background-color:black;visibility:hidden;">

Answer 1

您可以使用box-shadow属性来实现此效果。

更新了代码

＆＃13;

function lightsout() {
  document.getElementById("maindiv").classList.toggle("visible");
}

＆＃13;

.visible{
box-shadow: 0 0 0 10000px #000;
position: relative;
}

body{
color: red;
}

＆＃13;

<div style="width:100px;height:100px;border:2px solid blue; color: #000;" onclick="lightsout()" id="maindiv">Click Me</div>

Other elements on the page will be hidden...

＆＃13;

Answer 2

您只需在定位中添加z-indexes即可。通过给黑色区域提供比按钮更低的z-index，但是z-index比其他区域更高，你将有效。

此外，建议不要使用内联样式，因为使用样式和标记分隔时，代码变得更易于维护。

＆＃13;

function lightsout() {
  document.getElementById("lightsout").classList.toggle("visible");
}

＆＃13;

.button {
  position: relative;
  z-index: 10;
  width: 100px;
  height: 100px;
  border: 2px solid blue;
  background: white;
}

#lightsout {
  position: fixed;
  z-index: 5;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: gray;
  visibility: hidden;
}
#lightsout.visible {
  visibility: visible
}

＆＃13;

<div class="button" onclick="lightsout()">Click Me</div>
<div id="lightsout"></div>

Other elements are hidden.

＆＃13;

Answer 3

你可以使用css，

z-index，并添加divbox background-color，如下所示：）

function lightsout() {
  document.getElementById("lightsout").style.visibility = "visible";
}

#lightsout{
  z-index: -1
}

<div style="width:100px;height:100px;border:2px solid blue;background-color:white;" onclick="lightsout()">Click Me</div>

<div id="lightsout" style="position:fixed;top:0;left:0;width:100%;height:100%;background-color:black;visibility:hidden;">http://stackoverflow.com/questions/42688925/how-to-make-a-page-lights-out-except-for-one-element#

除了一个元素之外，如何使页面“熄灭”

3 个答案: