【jQuery】モーダルウィンドウ実装する超秀逸［Modaal］プラグインの使い方

このjQueryプラグイン、モーダルウィンドウを手軽に実装したい方に超絶オススメです！

まずは実際の挙動を確認してみましょう。

DEMO : http://humaan.com/modaal/

「VIEW EXAMPLE」をクリックすると、背景が暗くなり、モーダルウィンドウがフワッと浮かび上がります。
とてもスムーズな動きですね。
スクロール時に背景が固定されるのも嬉しいポイントです。

セットアップ

使い方は他のjQueryプラグインとほぼ同じ。
［jQuery］の本体ファイルと［Modaal］のデータファイルを読み込み、定められたテンプレートに則って設定項目を記述するだけです。

最初にデータファイル一式をダウンロードしましょう。
下記GitHubより「Download ZIP」をクリックしてファイルを入手します。

GitHub : https://github.com/humaan/Modaal

ダウンロードしたZIPファイルを解凍すると、様々なフォルダやファイルが展開されますが、このうち今回使うのは「modaal.min.js」と「modaal.min.css」の２つ。

これらのファイルをjQuery本体ファイルと共にHTMLの適当な箇所で読み込みます。

<head>
<link rel="stylesheet" href="modaal.min.css">
<script src='//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src="modaal.min.js"></script>
</head>

このとき、ファイルを読み込む順番に注意が必要です。
［Modaal］はjQueryに依存しますので、先にjQueryの本体ファイルを読み込んでおかないとエラーになります。

上記サンプルコードではCDNにホストされているjQueryを読み込むように記述しています。
わざわざjQuery本体ファイルをダウンロードしたり、サーバーにアップロードする手間が省けますし、Googleが提供するCDNの高速配信を利用して、僅かながらサイトの表示速度UPに貢献します。

起動するスイッチとモーダルウィンドウを作る

続いては［Modaal］を起動させるためのスイッチになる要素と、浮かび上がるモーダルウィンドウを作り込んでいきます。

ここでは仮に、次のようなHTMLにしてみました。

スイッチ部分

<a href="#modal" class="modal">Show</a>

モーダルウィンドウ

<div id="modal" style="display:none;">
	<p>これはサンプルです。</p>
</div>

クリックするaタグのhref属性にて、表示させるモーダルウィンドウのid属性を指定すること。
またモーダルウィンドウは最初は非表示にしないといけませんから、スタイルシートでdisplay:none;を指定しておきましょう。

最後に［Modaal］の初期設定を行います。
今回の場合、class="modal"を指定した要素をスイッチにしたいので、具体的には次のようなコードを記述することになります。

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

以上で最低限の設定は完了です。

これだけでも充分に使えますが、嬉しいことに［Modaal］には数多くのオプションが用意されています。

オプション設定

［Modaal］には30を超えるオプション項目が用意されています。
そのうち使用頻度が高そうなものを以下にピックアップしてみました。
そのままコピペして利用することもできますので、参考にしてみてください。

$('.modal').modaal({
	type: 'ajax',	// コンテンツのタイプを指定
	animation_speed: '500', 	// アニメーションのスピードをミリ秒単位で指定
	background: '#fff',	// 背景の色を白に変更
	overlay_opacity: '0.9',	// 背景のオーバーレイの透明度を変更
	fullscreen: 'true',	// フルスクリーンモードにする
	background_scroll: 'true',	// 背景をスクロールさせるか否か
	loading_content: 'Now Loading, Please Wait.'	// 読み込み時のテキスト表示
});

ここに挙げた以外にも便利な関数が用意されています。
より詳しくは公式のGitHubをご覧になるのが手っ取り早いかと思います。