初心者でも超簡単 | Micromodal.jsでモーダルを実装しよう！

こんにちは！さこちゃんです。

さこちゃん

簡単にモーダルを作りたい！けど、どうやって実装するの？？？

そんなあなたにぴったりなのが、Micromodal.js。
とても軽量でシンプル、かつアクセシビリティにも対応した超絶便利なモーダルライブラリです。
今回は、Micromodal.jsを使ったモーダルの実装方法をゼロからやさしく解説していきます〜

今回の記事はこんな方におすすめ！

モーダルを初めて実装する方
jQueryを使わずにシンプルなモーダルを作りたい方
JavaScriptを勉強中の方

【目次】

Micromodal.jsってなに？
デモ紹介
Micromodal.jsを導入してゆく〜
CSSをあててゆく〜
上級編：ふわっと表示
おわりに

Micromodal.jsってなに？

Micromodal.jsとは、「超シンプルで軽量、かつ手早く使える」モーダルライブラリです。
またMicromodal.jsはモーダルの開閉や制御などの”動作”のみを提供し、スタイルには一切干渉しません。そのため、見た目やアニメーションを自分でカスタマイズすることができます。

以下がMicromodal.jsの特徴です。

超軽量（わずか約2KB）で読み込みが早い
jQuery不要でシンプルなJavaScriptだけ
CSSで見た目やアニメーションをカスタマイズしやすい

デモ紹介

今回はこちらのデモを目指しましょう！

それではさっそく実装していきましょう〜〜〜

Micromodal.jsを導入してゆく〜

STEP1　Micromodal.jsを読み込む

まずはMicromodal.jsをnpmまたはyarnでインストールするか、CDNで読み込みます。
今回はCDNを使用します。（npm/yarnでのインストール方法は今回省きます。）
下記のCDNコードを</body>の直前に設置しましょう。

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

IEに対応させる場合

CDNの導入だけではIE11で使用することができません。使用できるようにためには、Polyfillを読み込む必要があります。

【 Polyfill ってなに？】
最近の機能をサポートしていない古いブラウザーで、その機能を使えるようにするためのコードのこと。
>>　参考ページはこちら

以下のPolyfillをCDNよりも前に設置することで、IEでもモーダルの使用が可能になります。

<script src="https://polyfill.io/v3/polyfill.min.js?features=Array.from%2CObject.assign"></script>

上記方法ではなく、HTMLに直接コードを記述したい場合は、下記公式のIssuesを<head>内にscriptタグで記述しましょう。
>>　公式Issues

STEP2　HTMLの基本構造を作る

基本的なHTML構造はこちらです。
公式サイトでも同様のコードが配布されていますので、参考にしてみてね。
（テキストは変えております！）
>>　公式サイト

<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 Modal Content Modal Content Modal Content Modal Content Modal Content Modal Content Modal Content Modal Content Modal Content Modal Content Modal Content Modal Content Modal Content </div>
        </div>
    </div>
</div>

<!-- 開くボタン -->
<button data-micromodal-trigger="modal-1" role="button">Demo Modal</button>
<a href="" target="_blank"></a>

STEP3　JavaScriptを一行書く

次にJavaScriptを記述します。
下記はMicromodalを初期化する際の記述です。

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

これで基本的な設定が完了しました！
以下のようになっていればOKです。

さこちゃん

あれ・・・！？表示めちゃくちゃ崩れてない？？？

ご安心を！！！！！

ここではMicromodal.jsを動かすための骨組みが完了しただけで、見た目は完成していません。
CSSで調整していきましょう〜

CSSをあててゆく〜

モーダルの見た目を整えていきましょう〜

STEP1　HTMLにクラス名を追記する

先ほど書いたHTMLにクラス名を追記しましょう。
ハイライトが追記分です。

<!-- Modal -->
<div class="modal" id="modal-1" 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__ttl" id="modal-1-title">Modal Title</h2>
                <!-- 閉じるボタン -->
                <button class="modal__close" aria-label="Close modal" data-micromodal-close></button>
            </header>
            <!-- モーダルの中身 -->
            <div class="modal__content" id="modal-1-content">Modal Content Modal Content Modal Content Modal Content Modal Content Modal Content Modal Content Modal Content Modal Content Modal Content Modal Content Modal Content Modal Content Modal Content </div>
        </div>
    </div>
</div>

<!-- 開くボタン -->
<button class="modal__open" data-micromodal-trigger="modal-1">Demo Modal</button>

STEP2　クラス名にスタイルをあてる

先ほど追記したクラス名にスタイルをあてます。
段階的に説明していきますね。

1.　モーダル非表示/表示のスタイル設定

まずはモーダルの非表示/表示設定から。以下を記述しましょう。

/* モーダル本体：常に表示可能状態だが、aria-hiddenで制御 */
.modal {
  display: block;
}

/* 非表示状態 */
.modal[aria-hidden="true"] {
  display: none;
}

/* 表示状態 */
.modal[aria-hidden="false"] {
  display: block;
}

.modalを常に表示状態にしておき、aria-hiddenで開閉の挙動を制御します。aria-hidden="true"の時はモーダルを非表示、aria-hidden="false"の時は表示にしておきます。これでボタンをクリック時のモーダル非表示/表示が可能になります。

2.　オーバーレイのスタイル設定

次にオーバーレイにスタイルをあてていきます。

オーバーレイとは、モーダルを表示時の背景のことです。
以下を記述しましょう。

.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;
}

3.　モーダル表示時のスタイル設定

次にモーダル表示時のスタイルをあてます。
以下を記述しましょう。

/* モーダル本体 */
.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;
  margin-bottom: 2em;
} 
.modal__ttl {
  margin: 0;
  font-weight: 600;
  font-size: 20px;
  color: #00449e;
} 
.modal__close {
  background: transparent;
  border: 0;
  cursor: pointer;
}  
.modal__header .modal__close:before {
  content: "\2715";
}

4.　開くボタンのスタイル設定

最後に開くボタンのスタイルをあてます。
以下を記述しましょう。

/* 開くボタンのデザイン */
.modal__open {
  font-weight: 600;
  font-size: 20px;
  color: #FFFFFF;
  border: 0;
  cursor: pointer;
  background: #00449e;
  padding: 10px 100px;
  border-radius: 4px;
}

これでCSSの設定が完了しました！
これでデモ通りの動きが完成したはずです。

上級編：ふわっと表示

上級者向けにモーダルを下からふわっと非表示/表示する方法を解説します。
以下のイメージです。

先ほどのCSSをベースに.modalと.modal__containerに変更を加えます。
下記コードにまるっと差し替えましょう。

/* 非表示状態 */
.modal[aria-hidden="true"] {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* 表示状態 */
.modal[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
}

/* モーダル本体 */
.modal__container {
  background-color: #fff;
  padding: 30px;
  max-width: 500px;
  max-height: 100vh;
  border-radius: 4px;
  overflow-y: auto;
  box-sizing: border-box;
  transform: translateY(40px);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 新規追記分：表示時のアニメーション完了状態 */
.modal[aria-hidden="false"] .modal__container {
  transform: translateY(0);
  opacity: 1;
}

おわりに

いかがでしたか？
初心者でもわかりやすいようjQueryを使用したアニメーションを紹介しました。

簡単に実装できるのでぜひ試してみてくださいね。

Micromodal.jsってなに？

デモ紹介

Micromodal.jsを導入してゆく〜

STEP1 Micromodal.jsを読み込む

IEに対応させる場合

STEP2 HTMLの基本構造を作る

STEP3 JavaScriptを一行書く

CSSをあててゆく〜

STEP1 HTMLにクラス名を追記する

STEP2 クラス名にスタイルをあてる

1. モーダル非表示/表示のスタイル設定

2. オーバーレイのスタイル設定

3. モーダル表示時のスタイル設定

4. 開くボタンのスタイル設定