Blog スタッフブログ

【Vanilla JS】軽量かつシンプルなモーダルプラグイン『Micromodal.js』

Category | Blog
/ 36,925views

こんにちは。デザイナーの山田です。
激動の2020年が終わろうとしています。今年は本当に大変な1年でした。
来年の今頃はどうなっているのか、今の時点では全く想像ができません。
少しでも世の中が好転しているといいですね。

今回はプラグインのご紹介です。
JavaScriptの自己学習の中で色々なプラグインに巡り合うのですが、その中でも実務に取り入れたいと感じたものを見つけました。
今回の記事が、皆様の参考になれば幸いです。

Table of contents

  1. 「Micromodal.js」の特徴
  2. インストール
  3. 使い方
  4. オプション
  5. JavaScriptからモーダルを操作する
  6. おわりに

「Micromodal.js」の特徴

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

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

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

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

インストール

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

npm
npm install micromodal --save
yarn
yarn add micromodal --save
CDN
<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が付与されていることが多く、プロジェクトに合わせた調整が大変でした。
このプラグインはシンプルな作りになっているので、利便性が高いと思います。

オプション

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

OptiontypeofDefaultDescription
onShowfunctionモーダルが開いたときに、実行される関数。
1つ目のパラメータにモーダルオブジェクトを、2つ目のパラメータに実行したい内容を指定する。
onClosefunctionモーダルが閉じたときに、実行される関数。
パラメータの渡し方はonShowと同様です。
openTriggerstringdata-micromodal-triggerモーダルを開く要素に付与する属性名。
closeTriggerstringdata-micromodal-closeモーダルを閉じる要素に付与する属性名。
openClassstringis-openモーダルが開くときに付与されるclass名。
disableScrollbooleanfalseモーダルが開いているとき、ページをスクロールさせない。
disableFocusbooleanfalseモーダルが開いたとき、最初に存在するフォーカス可能な要素にフォーカスを当てない。
awaitOpenAnimationbooleanfalseCSSアニメーションでモーダルを開く場合はtrueに。
アニメーションが終了するまで、モーダル内の要素へのフォーカスを待つことができる。
awaitCloseAnimationbooleanfalseCSSアニメーションでモーダルを閉じる場合はtrueに。
アニメーションが終わるのを待ってから、DOMから削除することができる。
debugModebooleanfalsetrueにすることで、コンソールの警告を抑制する。

オプションを用いて実装した例が下記になります。
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

Category | Blog
Author | Will Style Inc. / 36,925views

Company information

〒650-0024
神戸市中央区海岸通5 商船三井ビルディング4F

Contact us

WEBに関するお問い合わせは
078-977-8760 (10:00 - 18:00)