javascript - 正确的语义使模态叠加层在单击 div 时消失

Question

我正在处理模态，我希望在单击背景时使模态覆盖消失。

function dismissModal() {
  document.getElementById("modal").classList.remove("modal-overlay");
}

.modal-overlay {
  background-color: rgba(0, 0, 0, .5);
  bottom: 0;
  display: block;
  left: 0;
  overflow: hidden;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1;
}

.modal-content {
  background-color: #fff;
  height: 20em;
  width: 20em;
  margin: auto;
}

<section id="modal" class="modal-overlay" onclick="dismissModal()">
  <div class="modal-content">
    <h1>Example Code</h1>
  </div>
</section>

制作具有 onClick 属性的 div 或部分对于语义来说不是很好，但我不想将整个模式部分包装在按钮或 anchor 标记中。

在这样的用例中，人们通常会做什么来避免 div 或部分类中的 onClick？

Answer 1

希望以下代码段对您有所帮助。

function dismissModal() {
  document.getElementById("modal").classList.toggle("modal-overlay");
    document.getElementById("modal").classList.toggle("modal-hidden");
}

.modal-overlay {
  background-color: rgba(0, 0, 0, .5);
  bottom: 0;
  display: block;
  left: 0;
  overflow: hidden;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1;
}

.modal-content {
  background-color: #fff;
  height: 20em;
  width: 20em;
  margin: auto;
}
.modal-hidden{
display:none;
}

<section id="modal" class="modal-overlay" onclick="dismissModal()">
  <div class="modal-content">
    <h1>Example Code</h1>
  </div>
</section>
<button onclick="dismissModal()">Show Modal</button>