JavaScript Web制作 コーディング

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

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

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

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

モーダルを簡単に実装できる「Micromodal.js」とは

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

  • 1.9KBと軽量
  • jQuery未使用
  • 背景スクロールの固定が簡単
  • 閉じるボタン、背景クリック、ESCボタン押下で閉じる事が可能

背景スクロールの固定などは自作だとちょっと面倒ですが、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に以下のオプションを追記します。

  • awaitOpenAnimation: true → CSSのアニメーションで開く
  • awaitCloseAnimation: true → CSSのアニメーションで閉じる

上記はどちらもデフォルトは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.


以上になります。

Micromodal.jsでハンバーガーメニューも作れるらしいので、それも出来るようになったらまたブログでご紹介したいと思います。

-JavaScript, Web制作, コーディング