【JavaScript】jQueryなしで簡単にモーダルを実装できる軽量ライブラリ「Micromodal.js」

Webサイトを製作する上で、割とよく実装することになるモーダルウィンドウですが、実際に一からコーディングするのは何気に面倒だったりもします。

そこで今回は、軽量で使いやすいJavaScriptライブラリ「Micromodal.js」を使用して、簡単にモーダルを実装する方法を紹介します。

「Micromodal.js」を使用すれば、簡単にモーダルを実装できるだけでなく、様々なオプションが用意されているため、サイトに合わせて自分好みの仕様に調整することも可能です。

また、Micromodal.jsは、jQueryを使用しておらず、JavaScriptによる軽量なモーダルライブラリで、約2kBしかありません。シンプルで、モーダル（ポップアップ）ウィンドウを表示するための基本的な機能を提供します。

Micromodal.jsの読み込み
1. npm
2. CDN
実装方法
サンプル
オプション
まとめ

Micromodal.jsの読み込み

npm

npm install micromodal --save

npmでインストールを行う場合は、上記コマンドを実行してください。
npmがよくわからない方は次のCDNを利用する方法で読み込みましょう。

CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/micromodal/0.4.10/micromodal.min.js" integrity="sha512-qcwcAul7d7yUcoz3MmQABiaGDa+gVkaDWgZX6wEd/z3I6z62nQCDW3EqioQG+O+QlGCpxmJLdH5snh4IaDPiPA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

CDNを利用してMicromodal.jsを読み込みます。
よくわからない方は上記のタグを<head>～</head>内か、bodyの閉じタグ</body>の前に設置しておけばOKです。

実装方法

<div id="modal-1" aria-hidden="true">
  <div tabindex="-1" data-micromodal-close>
    <div role="dialog" aria-modal="true">
      <header>
        <h2>モーダルのタイトル</h2>
        <button aria-label="Close modal" data-micromodal-close></button>
      </header>
      <main>
        モーダルに表示したい内容を記載
      </main>
      <footer>
        <button>Save</button>
        <button data-micromodal-close>Close</button>
      </footer>
    </div>
  </div>
</div>

まずはbodyタグ内にHTMLでモーダルを定義します。data-micromodal-close属性を持つ要素をクリックすると、モーダルが閉じます。この属性はモーダル内の閉じるボタンやモーダルの背景オーバーレイに適用できます。

<script>
  MicroModal.init();
  MicroModal.show('modal-1'); // modal id
</script>

次に、Micromodalを初期化し、モーダルを表示します。
上記タグを<head>～</head>内か、bodyの閉じタグ</body>の前に設置してください。

注意点としては、MicroModal.jsのスクリプトが完全に読み込まれた後に、上記のモーダルを初期化や表示するためのコードを実行する必要があります。上記のコードは必ず読み込み用タグより後ろに設置しましょう。

基本的な使い方としてはこれだけでOKです。このように、Micromodalを利用すると簡単にモーダルを実装することができます。

サンプル

<!DOCTYPE html>
<html>
<head>
  <!-- 他のmetaタグやlinkタグなど -->
  <title>Your Website</title>
</head>
<body>
  <!-- あなたのコンテンツ -->

  <!-- モーダルのマークアップ -->
  <div id="modal-1" aria-hidden="true">
    <div tabindex="-1" data-micromodal-close>
      <div role="dialog" aria-modal="true">
        <header>
          <h2>モーダルのタイトル</h2>
          <button aria-label="Close modal" data-micromodal-close></button>
        </header>
        <main>
          モーダルに表示したい内容を記載
        </main>
        <footer>
          <button>Save</button>
          <button data-micromodal-close>Close</button>
        </footer>
      </div>
    </div>
  </div>

  <!-- Micromodal.jsの読み込み -->
  <script src="path/to/micromodal.min.js"></script>

  <!-- Micromodal.jsを使用したスクリプト -->
  <script>
    MicroModal.init();
    MicroModal.show('modal-1'); // modal id
  </script>
</body>
</html>

オプション

MicroModal.jsは様々なオプションを提供しており、モーダルの挙動をカスタマイズできます。以下に、いくつかの主なオプションを紹介します。

awaitCloseAnimation: モーダルの閉じるアニメーションが終了するのを待つかどうかを制御します。trueに設定すると、data-micromodal-close属性を持つ要素がクリックされた時、またはMicroModal.closeが呼び出された時に、閉じるアニメーションが完全に終了してからモーダルが閉じます。デフォルトはfalseです。

disableScroll: モーダルが開いている間、背景のスクロールを無効にするかどうかを制御します。trueに設定すると、モーダルが開いている間、ユーザーは背景をスクロールできなくなります。デフォルトはfalseです。

disableFocus: モーダルが開いている間、モーダル外の要素へのフォーカスを無効にするかどうかを制御します。trueに設定すると、モーダルが開いている間、ユーザーはモーダル外の要素にフォーズを移すことはできません。デフォルトはfalseです。

awaitOpenAnimation: モーダルの開くアニメーションが終了するのを待つかどうかを制御します。trueに設定すると、モーダルが開くアニメーションが完全に終了してからモーダルが開きます。デフォルトはfalseです。

onShow: モーダルが表示された時に呼び出されるコールバック関数です。

onClose: モーダルが閉じられた時に呼び出されるコールバック関数です。

これらのオプションを利用するときは、MicroModal.showまたはMicroModal.initメソッドの第二引数としてオブジェクト形式で指定します。

MicroModal.show('modal-id', {
  awaitCloseAnimation: true,
  onShow: function(modal){
    console.log("モーダルが開きました");
  },
  onClose: function(modal){
    console.log("モーダルが閉じました");
  }
});

上記のオプションの他にも、MicroModal.jsはモーダルの表示・非表示に関する詳細な制御や、カスタムアニメーションの実装など、様々なカスタマイズが可能です。

例えば、以下のようなオプションも提供されています。

openTrigger: モーダルを開くトリガーとなるカスタムデータ属性を設定します。デフォルトは data-micromodal-trigger です。

closeTrigger: モーダルを閉じるトリガーとなるカスタムデータ属性を設定します。デフォルトは data-micromodal-close です。

これらのオプションを使用して、MicroModalの挙動を自由にカスタマイズすることができます。例えば、以下のように使用することができます。

MicroModal.init({
  openTrigger: 'data-custom-open', // モーダルを開くカスタムデータ属性
  closeTrigger: 'data-custom-close', // モーダルを閉じるカスタムデータ属性
  onShow: (modal) => console.log(`${modal.id} is shown`), // モーダルが表示された時に呼び出されるコールバック関数
  onClose: (modal) => console.log(`${modal.id} is hidden`), // モーダルが閉じられた時に呼び出されるコールバック関数
  disableScroll: true, // モーダルが開いている間、背景のスクロールを無効にする
  disableFocus: false, // モーダルが開いている間、モーダル外の要素へのフォーカスを無効にする
  awaitOpenAnimation: false, // モーダルの開くアニメーションが終了するのを待つかどうか
  awaitCloseAnimation: true, // モーダルの閉じるアニメーションが終了するのを待つかどうか
});

これらのオプションを駆使することで、MicroModal.jsを使ったモーダルの挙動を自分のニーズに合わせて細かく調整することが可能です。