簡単にモーダルウィンドウを実装できるライブラリ Micromodal.jsの使い方

モーダルウィンドウって手軽に実装できるライブラリとかない？

モーダルウィンドウは自作することも可能ですが、色々とチェックしなくてはならないポイントも多く、ベテランのコーダーさんでも自作しない方がいいという方もいます。

プラグインやライブラリは出来るだけ使わない方がいいという風潮もありますが、下手に自作するより便利なライブラリを使った方が良い場合もあります。

効率よくコーディングしたい人はこちら

簡単にモーダルウィンドウを実装できるライブラリ Micromodal.jsの使い方

Micromodal.jsはJavaScriptライブラリで、分かりやすい特徴としては以下のようなものがあります。

背景スクロールの固定などは自作だとちょっと面倒ですが、Micromodal.jsは非常に簡単に出来ます。

また余計なスタイルが適用されていないので、イメージ通りのデザインにすることが可能です。

Micromodal.jsを読み込む

まずはMicromodal.jsをインストールするかCDNで読み込みます。

ここではCDNで読み込む方法で進めていきます。

以下のコードをheadタグに書きます。

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

IEでも使えるようにする

ただしこのままでIE11では使用できないので、使用できるようにpolyfillを読み込む必要があります（polyfillの説明は省きますm(__)m）

以下がpolyfillを読み込むコードになります。

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>

なので上記2つをheadタグで読み込んで下さい。

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script src="https://unpkg.com/micromodal/dist/micromodal.min.js"></script>

基本となるHTML

まずは基本となるHTMLはこちらになります。

<div class="modal micromodal-slide" 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">Micromodal</h2>
        <!-- 閉じるボタン -->
        <button
          class="modal-close"
          aria-label="Close modal"
          data-micromodal-close
        ></button>
      </header>
      <!-- モーダルのコンテンツ -->
      <div class="modal-content" id="modal-1-content">
        Modal Content
      </div>
    </div>
  </div>
</div>
<!-- 開くボタン -->
<button data-micromodal-trigger="modal-1" class="modal-open">
  open
</button>

背景のオーバーレイと閉じるボタン、そしてESCボタン押下でモーダルを閉じる事が出来ます。

JavaScript

Micromodal.jsを使うだけであれば以下のコードをjsファイルに書けばOKです。

MicroModal.init();

HTMLのbodyタグ直前に書く場合は以下になります。

    <script>
      MicroModal.init();
    </script>
  </body>
</html>

ただしこのままだとモーダルを開いた時に背景がスクロール出来てしまうので、それを固定したい場合は以下のオプションを追記します。

MicroModal.init({
  disableScroll: true,
});

上記はデフォルトではfalseとなっており、スクロールするようになっています。

jsはこれだけです。非常にシンプルでいいですね～

また、モーダルを開いたり閉じたりするときはjsに以下のオプションを追記します。

上記はどちらもデフォルトはfalseになっているので、CSSアニメーションで開閉したい時は追記します。

デモ

完成形と書きましたが、あくまでもサンプルなのでHTMLの構成やCSSなどはご自身に合わせて変えてみて下さい（一旦CSSも全部コピペしてからカスタマイズするといいと思います）

jsはCSSのアニメーションで開閉出来るように先ほどのコードを追記しています。

MicroModal.init({
  disableScroll: true,
  awaitOpenAnimation: true,
  awaitCloseAnimation: true
});

また、開くボタンより上のコードはinnerの外（一番外）などに置かないと背景のマスクなどが画面全体にならない事があるのでご注意下さい。

スクロールすると中央にボタンがあります。

See the Pen
Micromodal.js by junpei (@junpei-sugiyama)
on CodePen.

複数設定したい場合は、HTMLの1と書いてあるところを2、3と数字を変えて増やしていけばOKです。

以上になります。

コーディング案件の単価と作業効率を上げる！

Brainランキング1位獲得 ＆ 3日で500部突破

クチコミ約300件
（平均スコア）

今だけ！5つの無料特典あり🎁

👇画像をクリック