これは便利！HTMLのdialogタグでのモーダルウインドウ実装とアニメーション設定方法

<button id="opener">開く</button>
<dialog>
  <div class="dialog-inner">
    <div class="dialog-header">
      <button id="closer">閉じる</button>
      <h2>見出し</h2>
    </div>
    <div class="dialog-body">
      <p>モーダルウィンドウにいれるコンテンツです</p>
    </div>
  </dialog>
</dialog>

<dialog open>
</dialog>

dialog {
  position: absolute;
  display: block;
  inset-inline-start: 0;
  inset-inline-end: 0;
  margin: auto;
  border-width: initial;
  border-style: solid;
  border-color: initial;
  border-image: initial;
  padding: 1em;
  background-color: Canvas;
  color: CanvasText;
  width: -moz-fit-content;
  height: -moz-fit-content;
}
dialog:not([open]) {
  display: none;1)
}
dialog:modal {
  -moz-top-layer: top !important;
  position: fixed;
  overflow: auto;
  visibility: visible;
  inset-block-start: 0;
  inset-block-end: 0;
  max-width: calc(100% - 6px - 2em);
  max-height: calc(100% - 6px - 2em);
}
dialog::backdrop {
  background: rgba(0, 0, 0, 0.1);
}

dialog {
  border: none;
  padding: 0; /* ★外側クリックでモーダルを閉じる時に重要 */
  border-radius: 10px;
  box-shadow: 0 0 30px rgb(255 255 255/.5);

  &::backdrop {
    backdrop-filter: blur(8px);
    background-color: rgb(0 0 0/.3);
  }
}
.dialog-inner {
  padding: 20px; /* ★外側クリックでモーダルを閉じる時に重要 */
}

const openBtn = document.getElementById('opener');
const closeBtn = document.getElementById('closer');
const dialog = document.querySelector('dialog');

openBtn.addEventListener('click', () => {
  dialog.showModal(); /* show()でも開くがshowModalにすると::backdrop要素がつきよりモーダルっぽい */
});

closeBtn.addEventListener('click', () => {
  dialog.close();
});

html:has(dialog[open]) {
  overflow: hidden;
}

// Before
closeBtn.addEventListener('click', () => {
  dialog.close();
});

// After
closeBtn.addEventListener('click', () => {
  closeModal();
});

function closeModal() {
  dialog.close();
}

closeBtn.addEventListener('click', () => {
  closeModal();
});

// Add
dialog.addEventListener('click', (e) => {
  if (e.target.closest(".dialog-inner") === null) {
    closeModal();
  }
});

function closeModal() {
  dialog.close();
}

dialog[open] {
  animation-name: modalIn;
  animarion-duration: .3s;
  animation-fill-mode: fowards;
  animation-timing-function: ease-out;
}

@keyframes modalIn {
  0% {
    transform: translateY(-110%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

function closeModal() {

  // ①クラスを追加
  dialog.classList.add('hide');

  // ②アニメションの終了イベント"animationend"を登録
  dialog.addEventListener('animationend', function myfn() {

    // ②アニメション用classを削除
    dialog.classList.remove('hide');

    // ③dialogのopen属性を削除
    dialog.close();

    // ④CSSアニメーション終了イベントを解除
    dialog.removeEventListener('animationend', myfn);

  });
}

dialog.hide {
  animation-name: modalOut;
  animation-duration: .3s;
  animation-fill-mode: fowards;
  animation-timing-function: ease-out;
}

@keyframes modalOut {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-110%);
    opacity: 0;
  }
}