带点击灰色背景的模态对话框

Question

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

（这是 good/bad 实践吗？）

Answer 1

是的，当然是。

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

这是网络。它是虚拟的 space。几乎一切皆有可能。如果不是，那是你做错了。 :)

我可以使用：pointer-events

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>

带点击灰色背景的模态对话框

Modal Dialog with click-through grey-out background

html

javascript

css

modal-dialog