通过灰色背景点击模式对话框

Question

是否可以在背景为灰色的JavaScript中创建一个模式对话框，其中背景中的所有内容仍然注册点击事件？

（这种做法是好还是坏？）

Answer 1

是的，当然是。

.your-backdrop-selector {
    pointer-events: none;
}

这是网络。这是虚拟空间。几乎任何事情都有可能。如果不是，则说明您做错了。：）

我可以使用：指针事件

Answer 2

您甚至不需要javascript。

* {
  margin: 0;
  padding: 0;
}
.box {
  height: 100vh;
  transition: background .25s ease;
}
.box:hover {
  background: #f00;
}
.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid grey;
  background: plum;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
}

<div class="box">
</div>
<div class="modal">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa explicabo enim fuga, eaque necessitatibus nostrum officiis commodi atque aut, voluptatum in soluta a, molestiae deleniti!</p>
</div>