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

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

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

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

じゅんぺいブログは、Web制作（コーディング・WordPress制作）の技術記事を中心に、約500記事公開しています。ぜひ他の記事も参考にしてみてください！

完全無料のプログラミングスクール『ZeroPlus Gate』

30日間でWeb制作を学べる無料のプログラミングスクールがこちら

いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適です。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇
（有料になっていたらすいません🙇‍♂️）

＼ 完全無料 ／

ZeroPlus Gate公式サイト

毎日先着制！

簡単にモーダルウィンドウを実装できるライブラリ『Micromodal.js』とは？

『Micromodal.js』はWebアクセビリティ(a11y)に対応したJavaScriptのライブラリです。

Micromodal.jsの特徴

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

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

Micromodal.jsで出来ること

『Micromodal.js』の出来ることは以下のようなものがあります。

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

Micromodal.jsの使い方

それでは『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を使った方が確実に実装できるかと思います（実務でもこれを使っています）

また、Micromodal.jsを使ったハンバーガーメニューの作り方は、以下の記事を参照下さい。

以上になります。

この記事が役に立ったと思ったら、シェアボタンからX（旧Twitter）などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ！