【JavaScript】Micromodal.jsで簡単にモーダルを実装する方法

<script src="https://unpkg.com/micromodal@0.4.10/dist/micromodal.min.js"></script>

npm install micromodal

<!-- 開くボタン -->
<button data-micromodal-trigger="modal-1">モーダルを開く</button>

<!-- モーダル本体 -->
<div class="modal" id="modal-1" aria-hidden="true">
  <div class="modal__overlay" tabindex="-1" data-micromodal-close>
    <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-1-title">
      <header class="modal__header">
        <h2 class="modal__title" id="modal-1-title">モーダルのタイトル</h2>
        <button class="modal__close" aria-label="閉じる" data-micromodal-close></button>
      </header>
      <main class="modal__content">モーダルのコンテンツをここに書きます。</main>
      <footer class="modal__footer">
        <button class="modal__btn" data-micromodal-close>閉じる</button>
      </footer>
    </div>
  </div>
</div>

// data-micromodal-trigger 付きボタンを自動で有効化
MicroModal.init();

// JSから開く・閉じる
MicroModal.show("modal-1");
MicroModal.close("modal-1");

// 閉じたときの処理（onClose コールバック）
MicroModal.show("modal-1", {
  onClose: (modal) => console.log("閉じました", modal.id),
});

MicroModal.init({
  disableScroll: true,        // 開いている間は背景スクロールを無効化
  awaitCloseAnimation: true,  // 閉じるアニメ完了後に非表示にする
  openTrigger: "data-custom-open",   // 開くトリガー属性を変更
  closeTrigger: "data-custom-close", // 閉じるトリガー属性を変更
});

.modal__overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex; justify-content: center; align-items: center;
}
.modal__container {
  background: #fff; padding: 2rem;
  max-width: 500px; width: 100%; border-radius: 4px;
}
.modal__close {
  background: transparent; border: none;
  font-size: 1.5rem; cursor: pointer;
}