シュウ

公開日: 2021.09.03 / 更新日: 2026.10.06
今回は【jQuery】簡単にモーダルを設置、Modaal.jsの使い方を解説!
の解説になります！

こんな方に読んでほしい

• jQueryを学び始めた方
  プラグインを使って、手軽にWebサイトへ動きを追加したい方です。
• モーダルを簡単に設置したい方
  ボタンをクリックしたときに、ポップアップを表示させたい方です。
• Modaal.jsの使い方を知りたい方
  動画や画像、iframeなど、用途に合わせたモーダルの作り方を知りたい方です。

今回は、モーダル（ポップアップ）についての解説になります。
「Modaal.js」は、今でも簡単で使いやすいプラグインです。

完成イメージは上記のようになります。
ボタンをクリックすると、ポップアップウィンドウが表示されます。

Modaal.jsとは

Modaal.jsとは、モーダル（ポップアップ）を簡単に設置できるjQueryプラグインです。
jQueryが苦手な方でも問題ありません。
まずは、以下の手順で「Modaal.js」をダウンロードしましょう。

Modaal.jsのダウンロード方法

ダウンロードの手順は以下のようになります。

必要なファイルについて

ダウンロード後に必要なファイルについて解説します。
まずは、フォルダ名のModaal-masterをご確認ください。
使用するファイルは、以下の2点です。

これらのファイルをHTMLに読み込みます。
Modaal.jsはjQueryのプラグインのため、jQuery本体の読み込みが必須です。
jQuery本体の読み込み方法には、以下の2パターンがあります。

● 1つ目は、ファイルをダウンロードして使用するパターンです。
● 2つ目は、ファイルをダウンロードせずに、URLから読み込むパターンです。
どちらでも問題ありません。今回は2つ目のパターンを採用して解説します。
書き方は以下のようになります。

<!--css-->
<link rel="stylesheet" href="css/modaal.min.css">
<!--js-->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="js/modaal.min.js"></script>

必ず、jQuery本体よりも下にmodaal.min.jsを記述しましょう。
ファイルの階層は、ご自身のフォルダに合わせて変更してください。
jQueryをダウンロードしたい方は、こちらのリンクから入手できます。

記述場所について

CSSはhead内に、JavaScriptはbodyの終了タグ直前に記述します。
基本構造の書き方は以下のようになります。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>【jQuery】簡単にモーダルを設置....</title>
<!--css-->
<link rel="stylesheet" href="css/modaal.min.css">
</head>
<body>

　コンテンツが入ります。

<!--js-->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="js/modaal.min.js"></script>
</body>
</html>

モーダルの設定について

次に、モーダルの設定について解説します。
モーダルを動かすには、JavaScriptでの宣言が必要です。
HTMLでボタンとコンテンツを作成し、JavaScriptでmodaal()を呼び出す流れになります。
ここでは、よく使うモーダルを5種類紹介します。

シンプルモーダル

デモサイトはこちらです。
ボタンをクリックするとモーダルが表示され、コンテンツは自由に記述できます。
まずは、HTMLの書き方は以下のようになります。

<!--シンプルモーダル-->
<a href="#inline" class="inline">ボタン</a>
<div id="inline" style="display:none;">
 テキストが入ります。
</div>

続いて、JavaScriptの書き方は以下のようになります。

$(".inline").modaal({
    content_source: '#inline'
});

動画モーダル

デモサイトはこちらです。
ボタンをクリックするとモーダルが表示され、動画を再生できます。
HTMLの書き方は以下のようになります。

<!--動画モーダル-->
<a href="sample.mp4" class="video">ボタン</a>

続いて、JavaScriptの書き方は以下のようになります。

$('.video').modaal({
    type: 'video'
});

iframeモーダル

デモサイトはこちらです。
ボタンをクリックするとモーダルが表示され、iframeで外部ページなどを表示できます。
ただし、読み込みが遅くなる恐れがあるため、使用する数には注意しましょう。
HTMLの書き方は以下のようになります。

<!--iframeモーダル-->
<a href="url" class="iframe">ボタン</a>

続いて、JavaScriptの書き方は以下のようになります。

$('.iframe').modaal({
    type: 'iframe',
    width: 1280,
    height: 500
});

画像モーダル

デモサイトはこちらです。
ボタン（サムネイル画像）をクリックするとモーダルが表示され、拡大した画像を確認できます。
HTMLの書き方は以下のようになります。

<!--画像モーダル-->
<a href="img01.jpg" class="image" data-modaal-desc="ディスクリプション"><img src="img01.jpg" alt=""></a>

続いて、JavaScriptの書き方は以下のようになります。

$('.image').modaal({
    type: 'image'
});

画像ギャラリーモーダル

デモサイトはこちらです。
ボタンをクリックするとモーダルが表示され、複数の画像を表示できます。
矢印が追加され、画像をスライドして切り替えられます。
HTMLの書き方は以下のようになります。

<!--画像ギャラリーモーダル-->
<ul class="gallery-list">
    <li><a href="img01.jpg" data-group="gallery" class="gallery"><img src="img01.jpg" alt=""></a></li>
    <li><a href="img02.jpg" data-group="gallery" class="gallery"><img src="img02.jpg" alt=""></a></li>
    <li><a href="img03.jpg" data-group="gallery" class="gallery"><img src="img03.jpg" alt=""></a></li>
</ul>

続いて、JavaScriptの書き方は以下のようになります。

$('.gallery').modaal({
    type: 'image'
});

ここで解説したのは一部になります。他の種類については、公式サイトで解説されています。
次は、オプションについて解説します。

オプションについて

ここまでは、モーダルの種類について解説してきました。
オプションを指定すると、スピード、背景色、透明度などを変更できます。
書き方は以下のようになります。

$(".inline").modaal({
    content_source: '#inline',
    animation_speed: '1000',
    background: '#fff',
    overlay_opacity: '0.5'
});

ここで解説したオプションは一部になります。他のオプションについては、GitHubで解説されています。

関連記事

まとめ

今回はこれで以上です。
今回は、jQueryプラグイン「Modaal.js」を使って、モーダルを設置する方法を紹介しました。
CSSとJSファイルを読み込み、HTMLでボタンとコンテンツを作成し、JavaScriptでmodaal()を宣言するだけで、簡単にモーダルを実装できます。
また、オプションを指定することで、スピードや背景色なども自由に変更できます。
ぜひ、ご自身のサイトに合わせてカスタマイズしてみてください。

テンプレートを見る

Web・デザインの本棚を見る

< 前の記事

【CSS】テキストを1行で省略（…）表示する方法!

次の記事 >

【CSS】スクロール時に背景画像が切り替わるパララックスの作り方!iPhone対応も解説