【2026年版】modaalでモーダルウィンドウを実装する方法｜動かない時の対処法も解説

デモはこちら
CODEPENで見る


See the Pen
モーダル by ORTEGAWORKS (@ORTEGAWORKS)
on CodePen.


「モーダルウィンドウを簡単に実装したいけど、JavaScriptを一から書くのは大変…」「modaalを使ってみたけど動かない…」そんな悩みを抱えていませんか？

この記事でわかること
  • modaalライブラリを使ったモーダルウィンドウの実装方法
  • 画像・YouTube・iframeをモーダル表示する方法
  • 動かない時の原因と解決策
今回の記事を読んで欲しい人
  • モーダルウィンドウを簡単に実装したい人
  • modaalライブラリの使い方を知りたい人
  • modaalが動かなくて困っている人

modaalとは？基本を理解しよう

modaalは、モーダルウィンドウを簡単に実装できるjQueryライブラリです。画像ギャラリー、YouTube動画、iframe、インラインコンテンツなど、様々なタイプのモーダル表示に対応しています。

モーダル基本概念図

modaalの主な特徴

  • jQueryベースで導入が簡単
  • レスポンシブデザインに対応
  • 画像・動画・HTMLコンテンツに対応
  • 豊富なカスタマイズオプション
  • アクセシビリティに配慮された設計

注意：modaalはjQueryに依存しているため、jQuery本体の読み込みが必須です。

必要なファイルを準備しよう

modaalを使うには、以下の4つのファイルが必要です。

  • jQuery（本体）
  • modaal.min.js（JavaScriptファイル）
  • modaal.min.css（スタイルシート）
  • 自前のJSファイル（modaalの初期化用）

公式サイト：modaal公式ページ

CDNを使った読み込み（推奨）

ダウンロード不要で、CDN経由で読み込む方法が最も簡単です。以下のコードをコピーして使いましょう。

基本的な実装方法【3ステップ】

実装3ステップ

modaalの実装は、たった3ステップで完了します。順番に見ていきましょう。

ステップ1：CSSファイルの読み込み

まず、HTMLファイルの<head>内にmodaalのCSSファイルを読み込みます。

  1. <!-- head内に記述 -->
  2. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/modaal@0.4.4/dist/css/modaal.min.css">

ステップ2：HTMLマークアップの記述

モーダルを表示したい箇所に、トリガーとなる要素とモーダル内に表示するコンテンツを記述します。

  1. <!-- モーダルを開くトリガー -->
  2. <a class="modal" href="#inline_1">クリックでモーダル表示</a>
  4. <!-- モーダル内に表示されるコンテンツ -->
  5. <div class="none" id="inline_1">
  6.   <h3>モーダルのタイトル</h3>
  7.   <p>モーダルが表示されました！</p>
  8.   <p>ここに任意のHTMLコンテンツを記述できます。</p>
  9. </div>
重要なポイント
  • aタグのhref属性「#inline_1」とdivのid属性「inline_1」を一致させる
  • モーダルコンテンツには「none」クラスを付けて非表示にする
  • 複数のモーダルを作る場合は、inline_2、inline_3と番号を増やす

ステップ3：JavaScriptファイルの読み込みと初期化

</body>の直前に、jQuery、modaal、自前のJSファイルを順番に読み込みます。

  1. <!-- body閉じタグの直前に記述 -->
  2. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  3. <script src="https://cdn.jsdelivr.net/npm/modaal@0.4.4/dist/js/modaal.min.js"></script>
  4. <script src="js/script.js"></script>
  5. </body>

注意：読み込み順序を間違えると動作しません。必ず「jQuery → modaal → 自前のJS」の順で読み込んでください。

自前のJSファイル（script.js）に初期化コードを記述

  1. // script.js
  2. $(function() {
  3.   $(".modal").modaal({
  4.     // オプションを付ける場合はここに記入
  5.   });
  6. });

aタグのclass属性.modalを持つ要素をクリックすると、modaalが動作します。

CSSで非表示クラスを定義

モーダルコンテンツは、ページ読み込み時に表示されないようにしておきます。

  1. /* CSSファイルまたはstyleタグ内に記述 */
  2. .none {
  3.   display: none;
  4. }

応用編：画像・YouTube・iframeをモーダル表示する

3種類のモーダル表示

modaalは、インラインコンテンツだけでなく、画像、YouTube動画、iframeコンテンツもモーダル表示できます。

画像をモーダル表示

  1. <a class="modal-image" href="images/sample.jpg">
  2.   <img src="images/sample-thumb.jpg" alt="サムネイル">
  3. </a>
  1. $(".modal-image").modaal({
  2.   type: 'image'
  3. });

YouTube動画をモーダル表示

  1. <a class="modal-video" href="https://www.youtube.com/watch?v=xxxxxxxxxxx">
  2.   動画を見る
  3. </a>
  1. $(".modal-video").modaal({
  2.   type: 'video'
  3. });

iframeをモーダル表示

  1. <a class="modal-iframe" href="https://example.com">
  2.   外部サイトを表示
  3. </a>
  1. $(".modal-iframe").modaal({
  2.   type: 'iframe',
  3.   width: 800,
  4.   height: 600
  5. });

便利なオプション設定

modaalには、表示やアニメーションをカスタマイズできる便利なオプションが豊富に用意されています。

よく使うオプション一覧

オプション名 説明 デフォルト値
type モーダルのタイプ（inline/image/video/iframe） ‘inline’
overlay_close 背景クリックで閉じるか true
fullscreen フルスクリーン表示 false
width モーダルの幅（px） auto
height モーダルの高さ（px） auto
animation アニメーション効果 ‘fade’

オプションの使用例

  1. $(".modal").modaal({
  2.   type: 'inline',          // インラインコンテンツ
  3.   overlay_close: true,    // 背景クリックで閉じる
  4.   fullscreen: false,       // フルスクリーン無効
  5.   width: 600,              // 幅600px
  6.   animation: 'fade'       // フェードアニメーション
  7. });

動かない時のチェックリスト【原因別対処法】

トラブルシューティングチェックリスト

modaalが動かない場合、ほとんどが読み込み順序や属性の不一致が原因です。以下のチェックリストで確認しましょう。

  • jQueryが読み込まれているか
  • modaalの[JS]と[CSS]が両方読み込まれているか
  • 読み込み順序が「jQuery → modaal → 自前のJS」になっているか
  • aタグのhref属性とdivのid属性が一致しているか（#の有無も含む）
  • aタグのclass属性とJSの初期化セレクタが一致しているか
  • モーダルコンテンツに「none」クラスが付いているか
  • ブラウザの開発者ツールでエラーが出ていないか

原因1：jQueryが読み込まれていない

症状：「$ is not defined」というエラーが出る

対処法：jQuery本体を読み込んでいるか確認。必ずmodaalよりも前に読み込む。

原因2：読み込み順序が間違っている

症状：「modaal is not a function」というエラーが出る

対処法：必ず「jQuery → modaal → 自前のJS」の順で読み込む。

原因3：href属性とid属性が一致していない

症状：クリックしても何も起こらない

対処法：aタグのhref="#inline_1"とdivのid="inline_1"が完全一致しているか確認（#は除く）。

  1. <!-- 正しい例 -->
  2. <a href="#inline_1"></a>
  3. <div id="inline_1"></div>
  5. <!-- 間違った例（不一致） -->
  6. <a href="#inline_1"></a>
  7. <div id="inline_2"></div> <!-- IDが異なる -->

原因4：JSの初期化セレクタが間違っている

症状：モーダルが開かない

対処法：aタグのclass属性とJSのセレクタが一致しているか確認。

  1. // HTMLのclass="modal"に対して
  2. $(".modal").modaal({}); // 正しい
  4. $(".modaal").modaal({}); // 間違い（クラス名が異なる）

原因5：CSSが読み込まれていない

症状：モーダルは開くが、デザインが崩れている

対処法：modaal.min.cssが正しく読み込まれているか確認。

実践例：お問い合わせフォームをモーダル表示

実際の業務でよく使われる、お問い合わせフォームをモーダル表示する例を紹介します。

  1. <!-- トリガーボタン -->
  2. <a class="modal-contact" href="#contact-form">
  3.   お問い合わせはこちら
  4. </a>
  6. <!-- モーダル内のフォーム -->
  7. <div class="none" id="contact-form">
  8.   <h3>お問い合わせフォーム</h3>
  9.   <form>
  10.     <div>
  11.       <label for="name">お名前</label>
  12.       <input type="text" id="name" name="name">
  13.     </div>
  14.     <div>
  15.       <label for="email">メールアドレス</label>
  16.       <input type="email" id="email" name="email">
  17.     </div>
  18.     <div>
  19.       <label for="message">お問い合わせ内容</label>
  20.       <textarea id="message" name="message"></textarea>
  21.     </div>
  22.     <button type="submit">送信</button>
  23.   </form>
  24. </div>
  1. $(".modal-contact").modaal({
  2.   type: 'inline',
  3.   width: 500,
  4.   overlay_close: false // 誤って閉じないように背景クリック無効
  5. });

モーダルウィンドウを使う際の注意点

アクセシビリティへの配慮
  • キーボード操作（Escキーで閉じる）が可能か確認
  • スクリーンリーダーでの読み上げに対応しているか
  • フォーカス管理が適切か（モーダル内に閉じ込められる）
  • モーダルの多用は避ける（ユーザー体験を阻害する可能性）
  • スマートフォンでの表示確認を必ず行う
  • 重要な情報は通常ページにも記載する（SEO対策）
  • モーダル内のコンテンツが長すぎないようにする

よくある質問

Q1. modaalは商用利用できますか？

A. はい、modaalはMITライセンスで公開されているため、商用・非商用問わず無料で利用できます。クレジット表記も不要です。

Q2. jQueryを使わずにmodaalを使う方法はありますか？

A. modaalはjQuery依存のライブラリのため、jQueryなしでは使用できません。jQuery不要のモーダルライブラリをお探しの場合は、「micromodal.js」や「tingle.js」などの選択肢があります。

Q3. 複数のモーダルを同じページに実装できますか？

A. はい、可能です。href属性とid属性のペアを変えれば、複数のモーダルを実装できます（例：#inline_1, #inline_2, #inline_3）。

Q4. モーダルを自動で開くことはできますか？

A. はい、JavaScriptで.trigger('click')を使えば、ページ読み込み時に自動で開くことができます。

  1. // ページ読み込み時に自動で開く
  2. $(function() {
  3.   $(".modal").modaal({});
  4.   $(".modal").trigger('click'); // クリックをトリガー
  5. });

Q5. モーダルのデザインをカスタマイズしたいです

A. modaal.min.cssを上書きする形でカスタマイズできます。主なクラス名は.modaal-wrapper、.modaal-container、.modaal-closeなどです。

まとめ

実装完了イラスト

modaalは、モーダルウィンドウを簡単に実装できる便利なjQueryライブラリです。この記事で解説した内容をまとめます。

  • modaalはjQuery依存のモーダルライブラリ
  • インラインコンテンツ、画像、YouTube、iframeに対応
  • 実装は3ステップ（CSS読み込み→HTML記述→JS初期化）
  • href属性とid属性の一致が重要
  • 動かない場合は読み込み順序と属性をチェック

モーダルウィンドウは、ページの読み込み速度を上げる効果や、ユーザーの注意を引きたい時に有効です。ただし、多用しすぎるとユーザー体験を損なう可能性があるため、適切な場面で使用しましょう。

次のステップ
  • 実際にmodaalを使ってモーダルを実装してみる
  • オプションをカスタマイズして自分好みのデザインにする
  • アクセシビリティに配慮した実装を学ぶ

modaalの実装で困ったことがあれば、この記事のチェックリストを参考に原因を特定してみてください。Web制作の現場で役立つスキルとして、ぜひマスターしましょう！

機能実装一覧

スポンサーリンク