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

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

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

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

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

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

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

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

Micromodal.jsを読み込む

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

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

以下のコードを『headタグ』か『body閉じタグ直前』に書きます。

<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タグ』か『body閉じタグ直前』で読み込んで下さい。

<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です。

まとめ

今回はMicromodal.jsの使い方を解説しました。

冒頭でも書いた通り、自作するよりMicromodal.jsを使った方が確実に実装できるかと思います（実務でもこれを使っています）

以上になります。

コーディングの時給と作業効率を上げる！

2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。※ 4月15日に値上げ予定

• コピペで使えるWordPressの各テンプレート
• 実務でよく使う見出し一覧
• 実務でよく使うテキストのhoverアニメーション
• 実務でよく使うボタン内の矢印9種類
• Contact Form 7の色々・・・

などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短＝時給アップに繋がります。

さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。

800部以上販売し、レビューは430件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

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

販売ページとレビューを見てみる

Twitterのレビューはこちら