Web制作 JavaScript

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

※ 当サイトではアフィリエイト広告を利用しています

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

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

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

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
1,100部以上販売し、レビューは630件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

1,100部突破🎉

商品ページはこちら!

2024年4月15日値上げ!

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

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

Webアクセビリティ(a11y)とは?

Webアクセビリティ(a11y)とは高齢者・障害者など、年齢的・身体的な条件に関わらず、誰もが支障なくWebサイトを利用できるようにすることです。"a11y"はAccessibilityAからyまでの間に11 文字が挟まれているので、このように表します。

 

Micromodal.jsの特徴

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

  • 1.9KBと軽量
  • jQuery未使用(素のJavaScript)
  • WAI-ARIAガイドラインに準拠したアクセシビリティ対応
  • デフォルトのスタイルがないのでカスタマイズしやすい

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

 

Micromodal.jsで出来ること

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

  • モーダルが開いている時の背景スクロールの固定が簡単
  • モーダルが開いている時はモーダル以外の操作不可
  • ESCボタンでモーダルを閉じる
  • 閉じるボタンでモーダルを閉じる
  • 背景クリックでモーダルを閉じる
  • モーダルを開いたらモーダル内で最初のフォーカス可能な要素に移動

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

  • 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.

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

まとめ

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

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

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

あわせて読みたい
Micromodal.jsを使ったハンバーガーメニューの作り方(背景固定・オーバーレイあり)
Micromodal.jsを使ったハンバーガーメニューの作り方(背景固定・オーバーレイあり)

続きを見る

以上になります。

あわせて読みたい
Luminousで画像をポップアップで拡大する方法【Lightbox系プラグイン】
Luminousで画像をポップアップで拡大する方法【Lightbox系プラグイン】

続きを見る

 

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

-Web制作, JavaScript