BLOG
25年新卒 WEBエンジニア インターンシップ 受付中

【Modaal】モーダルを簡単に実装しよう【Micromodal.js】

更新日:2021/12/17

サイト制作でモーダルを実装することがあります。
なかにはデザインもないのに、途中から実装を依頼されることもあります。

モーダルは

  • モーダルを開いているときは背景を暗くし、背景固定にする

  • 閉じるボタン、または背景をクリックしたらモーダルを閉じる

  • 1ページに複数モーダルがあった場合、クリックしたものに対応するモーダルを開く

など制御することが多く、筆者は苦手意識を持っていました。

今回はそんな悩みを解決する、簡単にモーダルを実装できるプラグインModaalとライブラリMicromodal.jsを紹介したいと思います。

モーダルとは

そもそもモーダルとは何を指しているのでしょうか。

モーダルとは、ユーザーインターフェースデザイン(UIデザイン)の専門用語で、システムが特定の機能の使用に制限されている状態のことを指します。
例えば、モーダルウィンドウとモーダルダイアログが該当します。
引用元:モーダルって何? – WEB制作用語辞典

上記によるとモーダルは子画面を指しているのではありません。
子画面が開かれている間、親画面の操作ができない状態をモーダルと定義されています。

またモーダルと似た言葉でポップアップダイアログがあります。
違いをまとめると以下のようになります。

単語 意味
モーダル 子ウィンドウを開いている間は親ウィンドウの操作ができないという状態
ポップアップ 突然現れるという表示の仕方
ダイアログ ダイアログボックスのこと。
ユーザーにメッセージを確認させたり、入力を促す子画面

実際には子画面のことをモーダル、ポップアップ、ダイアログのどれかで呼んでいる印象です。
モーダルウィンドウ・ポップアップウィンドウなどを略してモーダル・ポップアップになっているのかと思います。

今回はモーダルウィンドウ・モーダルダイアログをまとめてモーダルと呼んでいます。

Modaal

Modaalは、WCAG(Web Content Accessibility Guidelines)2.0レベルAAでアクセス可能なモーダルウィンドウプラグインです。
WCAGとはW3Cが作成したウェブコンテンツのアクセシビリティに関するガイドラインです。
Modaalを使用することでアクセシビリティの確保されたモーダルを作成できます。

ではModaalの導入方法・基本的な使い方を紹介します。

導入方法

バージョン0.4.4のModaalの導入します。

またModaalはjQueryに依存したプラグインです。
バージョン1.11.2以降のjQueryを用意し、modaal.min.jsを読み込む前にjQueryを読み込んでください。

以下の3つの方法から導入してください。

Gitからインストール

GitからZipをダウンロードしてください。
解凍したdistフォルダーにあるjs/modaal.jscss/modaal.min.cssを配置し、読み込みます。

CDNの利用

CDNの配布がされているので、それぞれを所定の場所で読み込めばOKです。

パッケージマネージャーからインストール

パッケージマネージャーbowerとnpmからインストールできます。
今回はnpmでのインストールを紹介します。

以下のコマンドをたたきます。

使い方

ではModaalでモーダルを表示してみます。
今回はGitからインストールして、Modaalを導入しています。

上記のように必要なファイルを読み込めたら、準備完了です。
デフォルトのモーダルを表示させてみます。

ソースの表示

手順としては


・モーダルウィンドウになる要素にスタイルdisplay: none;を指定する
・モーダルの起動させる要素aタグのhref属性(①)にモーダルのid属性値を指定する
・①のDOM.modaal();を実行

これでモーダルが表示されます。
モーダルを起動させる要素をaタグではなく、buttonタグなどにしたい場合は以下のように記述してください。

毎回モーダルのidの値を指定するのが手間に感じたので、デモページのソースではデータ属性(data-*)を使って動的にしてみました。
あとはデザイン通りになるようにモーダルのスタイルを上書きしたり、オプションを指定していきましょう。

よく指定するスタイルを以下のような感じです。

またよく使うJavaScriptの制御は以下のような感じです。

typeオプションの値を変えると、簡単に画像やギャラリーのモーダルを実装できます。
どんな風に実装できるか気になる方は、公式のデモページがありますので見てみてください。

View Modaal Demos

$(‘モーダルのトリガー’).modal(‘close’)でモーダルを閉じることができます。
任意の要素をクリックしたときにモーダルを閉じたい場合などに使用したりします。

Micromodal.js

Micromodal.jsはa11y(Webaアクセシビリティ)に対応した純粋なJavaScriptで記述されたモーダルライブラリです。WAI-ARIAガイドラインに準拠したモーダルダイアログを作成することができます。
容量が1.9KBと軽量なのも特徴です。

ではMicromodal.jsの導入方法・使い方について紹介します。

導入方法

バージョンは0.4.6のMicromodal.jsを導入します。

セットアップ

以下の2つの方法からセットアップしてください。

パッケージマネージャーからインストール

パッケージマネージャーnpmとyarnからインストールできます。
今回はnpmでのインストールを紹介します。

以下のコマンドをたたきます。

するとnode_modules内でインストールされていると思います。
そうしたらモジュールとして読み込んでください。

CDNの使用

CDNでの配布がされているので、所定の場所で読み込めばOKです。

IE対応

IE11で使用するにはPolyfillが必要です。対応する場合は以下のように読み込みましょう。

使い方

まずモーダルのHTMLを記述します。
デモで使用されているHTMLをベースとします。
必要に応じて要素を追加したり、削除したりしてください。

ソースの表示

デフォルトのCSSはないので、自由にスタイルを当てることができます。
今回はデモのCSSを読み込みます。

ソースの表示

上記のように指定する必要はなく、以下のスタイルを当てると最低限のモーダルを動きを再現できます。

モーダルウィンドウのスタイルを当てたら、モーダルのトリガーとなる要素を配置しておきます。
トリガー要素のにdata-micromodal-triggerの値を対象となるモーダルのidの値設定します。

Micromodal.jsを読み込んだ後、以下の1文を記述すればモーダルが動作します。

よく使うjsの制御は以下のような感じです。

まとめ

これらを使うと、簡単にモーダルを作成できます。
どちらを導入するかは

  • jQueryを使用している

  • サクッとモーダルを実装したい

という場合ならModaal、

  • Vanilla JS(純粋なJavaScript)で記述されたモーダルライブラリを求めている

  • アクセシビリティの高いモーダルを作成したい

  • 軽量なライブラリを使用したい

  • デザインはこちらで当てたい

という場合はMicromodal.js、といった具合かと思いました。
Micromodal.jsの方が難易度高めの印象です。

案件では仕様通りの挙動であるか、構築スピードの早さなどが求められます。プラグインやライブラリを使ってモーダルを作成したほうがいいケースもあるかもしれません。

公式のGitやHPにはオプションについて詳しく記載されているので、興味がある方は見てみてください。

Modaal

Micromodal.js – Tiny javascript library for creating accessible modal dialogs

参考サイト

【初心者向け】モーダル・ポップアップ・ダイアログの意味の違い
モーダル系JSライブラリ実践で使える間違いなしの厳選5つ
リンクをクリックすると、背景が暗くなり動画や画像やテキストを表示 | 動くWebデザインアイディア帳
Micromodal.jsを使って、アクセシビリティに配慮したモーダルを作る

FOLLOW US