ブログBLOG

モーダルを簡単に実装しよう！使い方も解説【Micromodal.js・Modaal】

更新日：2021/12/17

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

モーダルは

モーダルを開いているときは背景を暗くし、背景固定にする
閉じるボタン、または背景をクリックしたらモーダルを閉じる
1ページに複数モーダルがあった場合、クリックしたものに対応するモーダルを開く

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

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

1 モーダルとは
2 Modaal
- 2.1 導入方法
- 2.2 使い方
3 Micromodal.js
4 まとめ
5 参考サイト

モーダルとは

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

モーダルとは、ユーザーインターフェースデザイン（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.jsとcss/modaal.min.cssを配置し、読み込みます。


<link rel="stylesheet" href="/css/modaal.min.css">

<script src="/js/modaal.min.js"></script>

CDNの利用

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


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/modaal@0.4.4/dist/css/modaal.min.css">

<script src="https://cdn.jsdelivr.net/npm/modaal@0.4.4/dist/js/modaal.min.js"></script>

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

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

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


npm install modaal

npm install modaal

使い方

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


  <link rel="stylesheet" type="text/css" href="../css/lib/modaal.min.css">
  <link rel="stylesheet" type="text/css" href="../css/style.css">

  </head>
  ～～～

  <script src="../js/lib/jquery-3.6.0.min.js"></script>
  <script src="../js/lib/modaal.min.js"></script>
  <script src="../js/common.js"></script>

  </body>

</head>

～～～

</body>

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

ソースの表示


<div class="btn-wrap">
  <a href="#modal" class="btn js-modal-target">リンクをクリック</a>
  <button class="btn js-modal-button-target" data-modal="#modal">ボタンをクリック</button>
</div>
    
<div id="modal" class="modal">
  <p>モーダルの内容が表示されます</p>
</div>

<a href="#modal" class="btn js-modal-target">リンクをクリック</a>

<button class="btn js-modal-button-target" data-modal="#modal">ボタンをクリック</button>

</div>

<p>モーダルの内容が表示されます</p>

</div>


.modal {
 display: none;
}

.modal {

display: none;

}


(function ($) {
  'use strict';
    
  //モーダル表示
  if ($(".js-modal-target").length > 0) {
    $(".js-modal-target").modaal();
  }
  if ($(".js-modal-button-target").length > 0) {
    var target = $(".js-modal-button-target").data('modal');
    $(".js-modal-button-target").modaal({
      content_source: target
    });
  }
})(jQuery);

(function ($) {

'use strict';

//モーダル表示

if ($(".js-modal-target").length > 0) {

$(".js-modal-target").modaal();

}

if ($(".js-modal-button-target").length > 0) {

var target = $(".js-modal-button-target").data('modal');

$(".js-modal-button-target").modaal({

content_source: target

});

}

})(jQuery);

手順としては

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

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


$(".ボタンのクラス").modaal({
    content_source: #モーダルのid属性値
});

$(".ボタンのクラス").modaal({

content_source: #モーダルのid属性値

});

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

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


/* モーダルのスタイル調整 */
.modaal-content-container {
  padding: 20px;
}

/* ✕ボタンの位置調整 */
.modaal-close {
  position: absolute;
  top: -60px;
  right: 0;
}
  
/* ✕ボタンの色 */
.modaal-close:after, 
.modaal-close:before {
  background:#ccc;  
}
  
/* ホバーしたときの✕ボタンの色 */
.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before {
  background: #ca353b;
}

/* モーダルのスタイル調整 */

.modaal-content-container {

padding: 20px;

}

/* ✕ボタンの位置調整 */

.modaal-close {

position: absolute;

top: -60px;

right: 0;

}

/* ✕ボタンの色 */

.modaal-close:after,

.modaal-close:before {

background:#ccc;

}

/* ホバーしたときの✕ボタンの色 */

.modaal-close:focus:after,

.modaal-close:focus:before,

.modaal-close:hover:after,

.modaal-close:hover:before {

background: #ca353b;

}

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


$('.modal').modaal({
  type: 'inline',
  hide_close: false, // 閉じるボタンの表示・非表示の制御する
  background: '#000'; // 背景オーバーレイの色を設定
  overlay_opacity: 0.8, // 背景オーバーレイの透明度を設定
  overlay_close: true, // 背景オーバーレイをクリックしてモーダルが閉じるかどうかの制御
  animation_speed: 300, // トリガーをクリックしてから、モーダルが表示されるまでのスピード
  background_scroll: false, // モーダルを開いている間、背景をスクロールできるかどうか
  width: 400, // モーダルの幅を設定
  height: 300, // モーダルの高さを設定
});


$('.js-modal-close').on('click', function () {
  // モーダルを閉じる
  $('.modal').modaal('close');
})

$('.modal').modaal({

type: 'inline',

hide_close: false, // 閉じるボタンの表示・非表示の制御する

background: '#000'; // 背景オーバーレイの色を設定

overlay_opacity: 0.8, // 背景オーバーレイの透明度を設定

overlay_close: true, // 背景オーバーレイをクリックしてモーダルが閉じるかどうかの制御

animation_speed: 300, // トリガーをクリックしてから、モーダルが表示されるまでのスピード

background_scroll: false, // モーダルを開いている間、背景をスクロールできるかどうか

width: 400, // モーダルの幅を設定

height: 300, // モーダルの高さを設定

});

$('.js-modal-close').on('click', function () {

// モーダルを閉じる

$('.modal').modaal('close');

})

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でのインストールを紹介します。

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


npm install micromodal --save

npm install micromodal --save

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


import MicroModal from 'micromodal';  // es6 module
var MicroModal = require('micromodal'); // commonjs module

import MicroModal from 'micromodal'; // es6 module

var MicroModal = require('micromodal'); // commonjs module

CDNの使用

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


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

IE対応

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


<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script script src="https://unpkg.com/micromodal/dist/micromodal.min.js"></script>

使い方

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

ソースの表示


<div class="modal micromodal-slide" id="任意の値" 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>
      <main class="modal__content" id="modal-1-content">
        <p>
          Try hitting the <code>tab</code> key and notice how the focus stays within the modal itself. Also, <code>esc</code> to close modal.
        </p>
      </main>
      <footer class="modal__footer">
        <button class="modal__btn modal__btn-primary">Continue</button>
        <button class="modal__btn" data-micromodal-close aria-label="Close this dialog window">Close</button>
      </footer>
    </div>
  </div>
</div>

Micromodal

</h2>

</header>

<p>

Try hitting the <code>tab</code> key and notice how the focus stays within the modal itself. Also, <code>esc</code> to close modal.

</p>

</main>

<button class="modal__btn modal__btn-primary">Continue</button>

<button class="modal__btn" data-micromodal-close aria-label="Close this dialog window">Close</button>

</footer>

</div>

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

ソースの表示


/**************************\
  Basic Modal Styles
\**************************/
  
.modal {
  font-family: -apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif;
}
  
.modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;
  align-items: center;
}
  
.modal__container {
  background-color: #fff;
  padding: 30px;
  max-width: 500px;
  max-height: 100vh;
  border-radius: 4px;
  overflow-y: auto;
  box-sizing: border-box;
}
  
.modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  }
  
.modal__title {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.25;
  color: #00449e;
  box-sizing: border-box;
}
  
.modal__close {
  background: transparent;
  border: 0;
}
  
.modal__header .modal__close:before { content: "\2715"; }
  
.modal__content {
  margin-top: 2rem;
  margin-bottom: 2rem;
  line-height: 1.5;
  color: rgba(0,0,0,.8);
}
  
.modal__btn {
  font-size: .875rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: .5rem;
  padding-bottom: .5rem;
  background-color: #e6e6e6;
  color: rgba(0,0,0,.8);
  border-radius: .25rem;
  border-style: none;
  border-width: 0;
  cursor: pointer;
  -webkit-appearance: button;
  text-transform: none;
  overflow: visible;
  line-height: 1.15;
  margin: 0;
  will-change: transform;
  -moz-osx-font-smoothing: grayscale;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  transition: -webkit-transform .25s ease-out;
  transition: transform .25s ease-out;
  transition: transform .25s ease-out,-webkit-transform .25s ease-out;
}
  
.modal__btn:focus, .modal__btn:hover {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}
  
.modal__btn-primary {
  background-color: #00449e;
  color: #fff;
}
  
  
  
/**************************\
  Demo Animation Style
\**************************/
@keyframes mmfadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
  
@keyframes mmfadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
  
@keyframes mmslideIn {
  from { transform: translateY(15%); }
  to { transform: translateY(0); }
}
  
@keyframes mmslideOut {
  from { transform: translateY(0); }
  to { transform: translateY(-10%); }
}
  
.micromodal-slide {
  display: none;
}
  
.micromodal-slide.is-open {
  display: block;
}
  
.micromodal-slide[aria-hidden="false"] .modal__overlay {
  animation: mmfadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}
  
.micromodal-slide[aria-hidden="false"] .modal__container {
  animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1);
}
  
.micromodal-slide[aria-hidden="true"] .modal__overlay {
  animation: mmfadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}
  
.micromodal-slide[aria-hidden="true"] .modal__container {
  animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1);
}
  
.micromodal-slide .modal__container,
.micromodal-slide .modal__overlay {
  will-change: transform;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

/**************************\

Basic Modal Styles

\**************************/

.modal {

font-family: -apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif;

}

.modal__overlay {

position: fixed;

top: 0;

left: 0;

right: 0;

bottom: 0;

background: rgba(0,0,0,0.6);

display: flex;

justify-content: center;

align-items: center;

}

.modal__container {

background-color: #fff;

padding: 30px;

max-width: 500px;

max-height: 100vh;

border-radius: 4px;

overflow-y: auto;

box-sizing: border-box;

}

.modal__header {

display: flex;

justify-content: space-between;

align-items: center;

}

.modal__title {

margin-top: 0;

margin-bottom: 0;

font-weight: 600;

font-size: 1.25rem;

line-height: 1.25;

color: #00449e;

box-sizing: border-box;

}

.modal__close {

background: transparent;

border: 0;

}

.modal__header .modal__close:before { content: "\2715"; }

.modal__content {

margin-top: 2rem;

margin-bottom: 2rem;

line-height: 1.5;

color: rgba(0,0,0,.8);

}

.modal__btn {

font-size: .875rem;

padding-left: 1rem;

padding-right: 1rem;

padding-top: .5rem;

padding-bottom: .5rem;

background-color: #e6e6e6;

color: rgba(0,0,0,.8);

border-radius: .25rem;

border-style: none;

border-width: 0;

cursor: pointer;

-webkit-appearance: button;

text-transform: none;

overflow: visible;

line-height: 1.15;

margin: 0;

will-change: transform;

-moz-osx-font-smoothing: grayscale;

-webkit-backface-visibility: hidden;

backface-visibility: hidden;

-webkit-transform: translateZ(0);

transform: translateZ(0);

transition: -webkit-transform .25s ease-out;

transition: transform .25s ease-out;

transition: transform .25s ease-out,-webkit-transform .25s ease-out;

}

.modal__btn:focus, .modal__btn:hover {

-webkit-transform: scale(1.05);

transform: scale(1.05);

}

.modal__btn-primary {

background-color: #00449e;

color: #fff;

}

/**************************\

Demo Animation Style

\**************************/

@keyframes mmfadeIn {

from { opacity: 0; }

to { opacity: 1; }

}

@keyframes mmfadeOut {

from { opacity: 1; }

to { opacity: 0; }

}

@keyframes mmslideIn {

from { transform: translateY(15%); }

to { transform: translateY(0); }

}

@keyframes mmslideOut {

from { transform: translateY(0); }

to { transform: translateY(-10%); }

}

.micromodal-slide {

display: none;

}

.micromodal-slide.is-open {

display: block;

}

.micromodal-slide[aria-hidden="false"] .modal__overlay {

animation: mmfadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1);

}

.micromodal-slide[aria-hidden="false"] .modal__container {

animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1);

}

.micromodal-slide[aria-hidden="true"] .modal__overlay {

animation: mmfadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1);

}

.micromodal-slide[aria-hidden="true"] .modal__container {

animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1);

}

.micromodal-slide .modal__container,

.micromodal-slide .modal__overlay {

will-change: transform;

}

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


.modal {
  display: none;
}
  
.modal.is-open {
  display: block;
}

.modal {

display: none;

}

.modal.is-open {

display: block;

}

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


<div class="btn-wrap">
  <button class="btn" data-micromodal-trigger="modal-1">トリガー</button>
</div>

</div>

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


MicroModal.init();

MicroModal.init();

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


MicroModal.init({
  disableScroll: false // モーダルが開いている間に、背景スクロールを無効にする。 
});

// モーダルを開く
MicroModal.show('モーダルのid属性値');

// モーダルを閉じる
MicroModal.close('モーダルのid属性値');