Blog スタッフブログ

2024.12.23

JavaScript WEB制作

JavaScript「Micromodal.js」でモーダルを実装

コーダーのKです。

jQueryに依存せずにモーダルを簡単に実装できるJavaScriptプラグインをご紹介します。

Micromodal.jsとは

Micromodal.jsは、軽量でアクセシビリティに配慮されたモーダルウィンドウを簡単に実装できるJavaScriptプラグインです。

依存関係がなく、シンプルなAPIでモーダルを操作できるため、カスタマイズしやすいのが特徴です。

Micromodal.jsの導入方法

CDNまたはローカルで読み込む

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

または、npmでインストールできます。

npm install micromodal

HTMLを作成

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

<!-- モーダル本体 -->
<div id="modal-1" class="modal" aria-hidden="true">
  <div class="modal__overlay" tabindex="-1" data-micromodal-close>
    <div class="modal__container" role="dialog" aria-modal="true">
      <header class="modal__header">
        <h2 class="modal__title">モーダルのタイトル</h2>
        <button class="modal__close" aria-label="閉じる" data-micromodal-close></button>
      </header>
      <main class="modal__content">
        <p>ここにモーダルの内容を記述します。</p>
      </main>
      <footer class="modal__footer">
        <button class="modal__close" data-micromodal-close>閉じる</button>
      </footer>
    </div>
  </div>
</div>

JavaScriptで初期化

MicroModal.init();

この一行を追加するだけで、モーダルが機能します。

オプション設定

例

MicroModal.init({
  disableScroll: true, // モーダル表示中にページスクロールを無効化
  disableFocus: false, // フォーカストラップを無効化
  awaitCloseAnimation: true, // モーダルを閉じる際にアニメーション完了を待機
  debugMode: true // デバッグモードを有効化
});

オプションが用意されていますので、状況に応じて変更が可能です。

Micromodal.js

次の記事へ