今日は超簡単にポップアップ・ウィンドウを実装できる［Remodal］を紹介します。

まずは下記リンク先より、実際の挙動をご確認ください。

オンズの実装サンプル : https://on-ze.com/demo/jquery-remodal/

ファイル容量が軽いため挙動も早く、レスポンシブ対応で、アニメーション部分はCSSに依存しています。
後で紹介するスタイルシートの［remodel-default-theme.css］がアニメーションを司っていて、そこで動作の処理を指定する仕組みになっています。

以下、実装方法を紹介していきます。

［Remodal］の必要なファイルを読み込む

はじめに［Remodal］の公式サイトより、必要なファイルを入手してきます。

上記GitHubより「Download ZIP」をクリックするとダウンロードがはじまります。

このZIPファイルを解凍すると、いくつかのフォルダとファイルに展開されます。
このうち必要になるのは下記の3つのファイル。

  • remodel.js または remodel.min.js
  • remodel.css
  • remodel-default-theme.css

このうち「remodel.js」と「remodel.min.js」の中身は同じです。違いは圧縮されているか否か。
通常は「remodel.min.js」のほうを使うのが一般的です。
容量が「2KB」と超軽量です。

スタイルシートの「remodel.css」にはポップアップ時のオーバーレイなどが記述されていて、もう一方の「remodel-default-theme.css」にはアニメーションの処理が記載されています。
各スタイルシートの中身は好きなように書き換えてOK。
デザインの微調整はこのCSSで行います。

各ファイルを読み込む

ダウンロードした各ファイルと、jQueryのコアファイルをHTMLの任意の箇所で読み込みます。
ここではGoogleのCDNにホストされているjQueryを利用することにします。

<link rel="stylesheet" href="remodal.css">
<link rel="stylesheet" href="remodal-default-theme.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="remodal.min.js"></script>

このときjquery本体ファイルの［jquery.min.js］は必ず［remodal.min.js］よりも先に読み込むように記述してください。

モーダル・ウィンドウを作る

続いてポップアップで表示されるモーダル・ウィンドウを作りこんでいきます。

<div class="remodal" data-remodal-id="modal" data-remodal-options="hashTracking:false">
	<button data-remodal-action="close" class="remodal-close"></button>
	<h1>タイトル</h1>
	<p>コンテンツを記述します。</p>
	<button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
	<button data-remodal-action="confirm" class="remodal-confirm">OK</button>
</div>

ここでのポイントは以下の３点。

  • 大枠の要素に独自データ属性data-remodal-id="任意の文字列"を記述しておくこと。ここで指定した値がポップアップさせるアンカー要素と紐づけられます。
  • 同じくクラス属性でclass="remodal"も記述しておきます。
    スタイルシート側でclass="remodal"及びdata-remodal-id="modal"に対して「display:none;」の処理をしているので、通常の状態では非表示になります。
  • モーダル・ウィンドウの中身では「button」要素を使って「確認」「キャンセル」「ウィンドウを閉じる」ボタンを追加できます。方法は独自データ属性のdata-remodal-actionを追加して、それぞれ「close」「cancel」「confirm」の値を付与します。

ポップアップを起動させるスイッチを作る

ポップアップ・ウィンドウを起動させる方法は２パターンあります。

  1. アンカータグ（リンク）で起動させる
  2. JavaScriptで起動させる

アンカータグ（リンク）で起動させる

まずはアンカータグを使う方法です。

hrefでリンク先を指定する方法と、data-remodel-targetで指定する方法、２通りのうちどちらか好きな方を利用してください。

<a href="#modal">「href」でポップアップ！</a>

<a data-remodal-target="modal">「data-remodal-target」でポップアップ！</a>

なお、ここで指定している「href」及び「data-remodel-target」の値は、ポップアップするウィンドウのdata-remodal-idと同じ文字列にします。

JavaScriptで起動させる

続いてJavaScriptを使う方法です。

最もシンプルに書く場合は次のようになります。

$('[data-remodal-id=modal]').remodal();

各種設定

hashTracking
初期値 : true
「data-remodel-target」を指定してモーダルウィンドウを開きます。
closeOnConfirm
初期値 : true
「true」を指定すると「confirm」を指定したボタンをクリックした際にウィンドウが閉じるようになります。
closeOnCancel
初期値 : true
上に同じく、「true」を指定すると「cancel」を指定したボタンをクリックした際にウィンドウが閉じるようになります。
closeOnEscape
Default: true
エスケープキー（esc）でウィンドウを閉じます。
closeOnOutsideClick
初期値 : true
「true」を指定するとページ内のどの箇所をクリックしてもウィンドウが閉じるようになります。
modifier
初期値 : ''
モーダルウィンドウの背景要素に任意のクラス名を追加することができます。

各イベントごとのコールバック関数。

各イベントごとのコールバックも一通りの処理が使えます。
指定できる要素が多いので細かいところまでカスタマイズできるのが嬉しいですね。

$(document).on('open', '.remodal', function () {
	 var modal = $(this);
});
$(document).on('opened', '.remodal', function () {
	 var modal = $(this);
});
$(document).on('close', '.remodal', function () {
	 var modal = $(this);
});
$(document).on('closed', '.remodal', function () {
	 var modal = $(this);
});
$(document).on('confirm', '.remodal', function () {
	 var modal = $(this);
});
$(document).on('cancel', '.remodal', function () {
	 var modal = $(this);
});

なお「jQuery」ではなく「Zepto」との併用も可能です。

説明が長くなりましたが、実際に使ってみると意外と簡単に実装することができるので初心者の方にもオススメです。ぜひお試しください。

関連本。jQueryについて学ぶなら、コチラの書籍をぜひ！

jQuery最高の教科書