Правильная семантика, чтобы заставить модальное наложение исчезать при щелчке 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>

Для семантики не очень хорошо создавать div или раздел со свойством onClick, но я не хочу оборачивать весь мой модальный разделв кнопке или теге привязки.

Что обычно делают люди, чтобы избежать onClick в классе div или section в таких случаях использования?

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>

Answer 2

element.addEventListener(‘click’, event => /* Do stuff, hide modal */ )

с React / JSX:

const handler = event => /* Do stuff, hide modal */
const buttonComponent = <button onClick={handler} />