jQuery非依存のVanilla JavaScriptモーダルウィンドウライブラリ Micromodal.js

この記事では、JavaScript モーダルウィンドウライブラリ、Micromodal.js を紹介します。

Micromodal.js は以下の特徴を持っています。

• 軽量である（1.9 KB！）
• WAI-ARIA ガイドライン に則ったアクセシビリティ対応
• ライブラリに依存しない Pure JavaScript で書かれている
• スタイルが自由（デフォルトの装飾が適用されていない）

CSS が付属されていないのがサイトのテイストに合わせやすくて逆に嬉しいです。jQuery 製のライブラリは結構個性的な装飾ついちゃってること多い気がするので。Pure JavaScript なので Vue や React とも相性が良さそうです。

というわけで、ここから使いかたを紹介していきます。

Micromodal.js の使いかた

インストール

まずはインストール方法です。npm リポジトリおよび CDN に公開されています。

npm

$ npm install micromodal --save

yarn

$ yarn add micromodal --save

CDN

https://unpkg.com/micromodal/dist/micromodal.min.js

ライブラリの基本動作

後述する起動時のオプションによっても異なりますが、基本の動作を先に説明します。

モーダルが閉じた状態：

<div id="modal-1" aria-hidden="true"><!-- Content --></div>

モーダルが開いた状態：

<div id="modal-1" aria-hidden="false" class="is-open"><!-- Content --></div>

このライブラリの挙動は非常に単純です。① aria-hidden の値を切り替える、② class に is-open をつけたり外したりする、ということしかやりません。

モーダルの中身のマークアップもスタイルも、開閉時のアニメーションなども開発者に委ねられています。とはいえ サンプルの HTML と CSS が公開されているので、こちらをベースにプロジェクトに合わせてカスタマイズしていくとよいでしょう。

装飾のためのクラスや後述する data 属性をすべて取り払うと、以下のようなマークアップがベースの骨組みになっていることがアクセシビリティという Micromodal のテーマからしても好ましいようです。

<div id="modal-1" aria-hidden="true">
  <div tabindex="-1">
    <div 
      role="dialog"
      aria-modal="true"
      aria-labelledby="modal-1-title"
      aria-describedby="modal-1-content"
    >
      <header>
        <h2 id="modal-1-title">Micromodal</h2>
      </header>
      <main id="modal-1-content">
        <p>Modal content</p>
      </main>
    </div>
  </div>
 </div>

data 属性で制御する

data 属性からモーダルの開閉を制御する方法を紹介します。

<!-- モーダル -->
<div id="modal-1" aria-hidden="true">
  <!-- この div がオーバーレイになるとする -->
  <div tabindex="-1" data-micromodal-close>
    <div  role="dialog" aria-modal="true" aria-labelledby="..." aria-describedby="...">
      <!-- 略 -->
    </div>
  </div>
</div>

<!-- 開くボタン -->
<button data-micromodal-trigger="modal-1">open</button>

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

モーダルのマークアップの一番外側に id を付与します。

モーダルを開くためのボタンやリンクに data-micromodal-trigger 属性を付与します。属性値は開きたいモーダルの id です。

クリックしたときにモーダルを閉じる機能を持たせたい要素に data-micromodal-close 属性を付与します。属性値は不要で、先祖要素のモーダルを閉じます。上記の例であれば、オーバーレイをクリックするとモーダルが閉じる挙動を実現できます。

MicroModal オブジェクトの init メソッドを呼び出します。まず data-micromodal-trigger 属性が検索され、その属性値を id に持つ要素がモーダルと認識されます。

JavaScript から操作する

data 属性ではなく、JavaScript からモーダルを開閉することもできます。

MicroModal.show('modal-id');
MicroModal.close('modal-id');

ボタンやリンククリック以外のきっかけでモーダルを操作したい場合に有効です。例えば Ajax 通信の結果をもとにモーダルを表示するなどでしょうか。

オプション

モーダルの挙動を制御するためのオプションがいくつか用意されています。

init の第一引数または show の第二引数にオプションオブジェクトを渡します。

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

MicroModal.show('modal-1', {
  // show メソッドにもオプションを渡せます
  awaitCloseAnimation: true
});

オプションの一覧は以下の通りです。

IE 11 対応

ライブラリのコードは ES2015 で書かれているようで、そのままでは IE 11 では動作しません。IE 11 には定義されていないメソッドである Array.from と Object.assign wを使用しているため、それぞれのポリフィルを読み込む必要があります。

それぞれ MDN からポリフィルのコードを引っ張ってきましょう。

Array.from
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/from#Polyfill

Object.assign
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/assign#Polyfill

上記のコードを polyfill.js など適当な名前のファイルにコピペして、Micromodal を読み込む前に読み込めば OK です。

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

require('./polyfill.js');
const MicroModal = require('micromodal');

以上、Micromodal.js を紹介しました。