【jQuery】モーダル系プラグイン Remodalの使用方法

概要

軽量でシンプルなのでかなりカスタマイズしやすい！
今まで調べてきた中では一番おすすめ。
ただし、ギャラリーなどの機能はないので簡単なポップアップのみ使用したい用途で使用する。
また、デフォルトがいい感じなのでそれほど問題ないが、アニメーションのカスタマイズはほぼない。

公式サイト

htmlでの読み込み

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

remodal.cssはポップアップ時のオーバーレイなどが記述されている。
remodel-default-theme.cssにはアニメーションの処理などが記述されている。

モーダルコンテンツを作りこむ

インラインコンテンツの場合

<div class="remodal-bg"></div>
<div class="remodal" data-remodal-id="modal">
  <button data-remodal-action="close" class="remodal-close"></button>
  <h1>Remodal</h1>
  <p>
    Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.
  </p>
  <br>
  <button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
  <button data-remodal-action="confirm" class="remodal-confirm">OK</button>
</div>

画像のみの場合（内容としてはインラインコンテンツ）

<div class="remodal-bg"></div>
<div class="remodal" data-remodal-id="modal">
  <button data-remodal-action="close" class="remodal-close"></button>
  <img src="/images/modal.jpg" alt="">
</div>

id属性ではなくdata-remodal-id属性を使用することに注意。

モーダル表示ボタンにidを紐付ける

<a href="#modal">Call the modal with data-remodal-id="modal"</a>

href属性にdata-remodal-id属性の値を紐付ける。

<a data-remodal-target="modal">Call the modal with data-remodal-id="modal"</a>	

またはdata-remodal-target属性でも可。
基本的にはこれでモーダル完成。

オプション

data-remodal-options属性に設定する。

<div class="remodal" data-remodal-id="modal"
  data-remodal-options="hashTracking: false, closeOnOutsideClick: false">
.
.
.
</div>

オプション	デフォルト	説明
hashTracking	true	モーダルボタンでdata-remodal-target属性がhrefよりも優先になる
closeOnConfirm	true	confirmボタンをクリックするとモーダルが閉じる
closeOnCancel	true	cancelボタンをクリックするとモーダルが閉じる
closeOnEscape	true	escキーを押すとモーダルが閉じる
closeOnOutsideClick	true	モーダル外の背景をクリックするとモーダルが閉じる
modifier	''	モーダルウィンドウの背景要素に任意のクラス名を追加

イベント

$(document).on('opening', '.remodal', function () {
  console.log('Modal is opening');
});

$(document).on('opened', '.remodal', function () {
  console.log('Modal is opened');
});

$(document).on('closing', '.remodal', function (e) {

  // Reason: 'confirmation', 'cancellation'
  console.log('Modal is closing' + (e.reason ? ', reason: ' + e.reason : ''));
});

$(document).on('closed', '.remodal', function (e) {

  // Reason: 'confirmation', 'cancellation'
  console.log('Modal is closed' + (e.reason ? ', reason: ' + e.reason : ''));
});

$(document).on('confirmation', '.remodal', function () {
  console.log('Confirmation button is clicked');
});

$(document).on('cancellation', '.remodal', function () {
  console.log('Cancel button is clicked');
});

開いた時、閉じた時などにコールバック関数を走らせることが可能。