<main class="main">
  <h1 class="title">ダイアログの実装例</h1>
  <p class="desc">ベースコーティング</p>
  <div class="container">
    <button data-open-trigger="dialog">ダイアログを開く</button>
  </div>
</main>
<!-- //.main -->
<div id="dialog" class="dialog __hidden">
  <div class="dialog__bglayer" data-close-trigger="dialog"></div>
  <div class="dialog__container">
    <h2 class="dialog__title">ダイアログです</h2>
    <p class="dialog__description">これはダイアログのサンプルです。</p>
    <div class="dialog__action">
      <button data-close-trigger="dialog">ダイアログを閉じる</button>
    </div>
  </div>
</div>
<!-- //.dialog -->

* {
  box-sizing: border-box;
}
.main {
  padding: 2rem;
  min-height: 100vh;
}
.container {
  display: flex;
  align-items: center;
  margin-top: 2rem;
}
.title {
  font-size: 1.25rem;
  font-weight: 600;
}
.desc {
  font-size: 1rem;
  margin-top: 1rem;
}
.dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease-out;
  opacity: 1;
  visibility: visible;
}
.dialog.__hidden {
  opacity: 0;
  visibility: hidden;
}
.dialog__bglayer {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  z-index: -1;
}
.dialog__container {
  background-color: #fff;
  max-width: min(500px, 100%);
  max-height: 100vh;
  padding: 2rem;
  border-radius: 5px;
  overflow-y: scroll;
}
.dialog__title {
  font-size: 1rem;
  font-weight: 600;
}
.dialog__description {
  margin-top: 1rem;
  font-size: 1rem;
}
.dialog__action {
  margin-top: 2rem;
}
[data-open-trigger]:focus,
[data-close-trigger]:focus {
  outline: 2px solid #2962ff;
}

const dialog = document.getElementById("dialog");
const openTriggers = [
  ...document.querySelectorAll(`*[data-open-trigger="dialog"]`)
];
const closeTriggers = [
  ...document.querySelectorAll(`*[data-close-trigger="dialog"]`)
];

const handleDialogOpen = () => {
  dialog.classList.remove("__hidden");
};
const handleDialogClose = () => {
  dialog.classList.add("__hidden");
};

openTriggers.forEach((trigger) => {
  trigger.addEventListener("click", handleDialogOpen);
});
closeTriggers.forEach((trigger) => {
  trigger.addEventListener("click", handleDialogClose);
});