ウィルスタイル株式会社 / Will Style Inc.

「Micromodal.js」の特徴

「Micromodal.js」は、jQueryを用いない、純粋なJavaScriptで作られています。
非常に軽量かつ、アクセシビリティにも対応しており、モダンなプラグインといえるでしょう。

「Micromodal.js」の主な特徴は以下の通りです。

• 1.9kbの軽量ライブラリ
• WAI-ARIAガイドラインに準拠
• モーダル開閉時に、aria属性を切り替えるシンプルな挙動
• 余計なスタイルが施されていない

軽量なだけでなく、挙動がシンプルなこと・CSSでカスタマイズがしやすいことも大きなメリットです。

インストール

まずはインストール方法です。
npmやyarnでインストールするか、CDNでscriptを読み込んでください。

npm install micromodal --save

yarn add micromodal --save

<script src="https://cdn.jsdelivr.net/npm/micromodal/dist/micromodal.min.js"></script>
<!-- or -->
<script src="https://unpkg.com/micromodal/dist/micromodal.min.js"></script>

また、IE11で利用するためには、polyfillが必要です。
公式のIssuesを参考に、下記を事前に読み込ませておく必要があります。

使い方

使い方はとてもシンプルです。
モーダルを開くボタンなどに、「data-micromodal-trigger」を付与し、値として対象のモーダルを指定します。
また、モーダルを閉じる要素（背景や閉じるボタンなど）には、「data-micromodal-close」を付与します。
基本的な設定はこれだけです。

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

  <div class="overlay" tabindex="-1" data-micromodal-close>

    <div role="dialog" aria-modal="true" aria-labelledby="modal-1-title" >

      <header>
        <h2 id="modal-1-title">
          Modal Title
        </h2>
        <button aria-label="Close modal" data-micromodal-close></button>
      </header>

      <div id="modal-1-content">
        Modal Content
      </div>

    </div>

  </div>

</div>

<!-- Button -->
<button data-micromodal-trigger="modal-1" role="button"> Demo Modal </button>

<!-- Script -->
MicroModal.init();

また、上記をカスタマイズした例も用意しました。

挙動を見ていただくと分かる通り、プラグイン側で操作している部分は、「aria-hiddenの値を切り替える」「classをつける・外す」しかありません。
モーダルを出現させる動きについては、css側でコントロールしています。

他のモーダルプラグインは既存のclassが付与されていることが多く、プロジェクトに合わせた調整が大変でした。
このプラグインはシンプルな作りになっているので、利便性が高いと思います。

オプション

多数のオプションが用意されています。
必要最低限に欲しいものは揃えられており、シンプルで使いやすい印象です。

オプションを用いて実装した例が下記になります。
initメソッドで設定する際は、第1引数にオプションオブジェクトを渡します。

MicroModal.init({
  openClass: 'is-open',
  disableScroll: true,
});

JavaScriptからモーダルを操作する

他のJavaScript内では、下記のようにして呼び出すことも可能です。
ボタンやリンクをクリックする以外の動きをトリガーにしたい（Ajaxなど）とき、有効な使い道となりそうです。

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

また、この場合にオプションを設定したい場合は、オプションオブジェクトは第2引数に渡します。

MicroModal.show('modal-1', {
  awaitCloseAnimation: true
});

おわりに

モーダル系のプラグインは数多く触ってきましたが、ここまでシンプルに使えるものに初めて出会えました。
モーダルは、実務でも数多く使用する機会があるので、うまく活用していきたいと思います。

今回参考にさせていただいた記事

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