モーダル作成に便利な jQueryプラグイン Remodal

簡単にモーダルが設置できる。

手順

1 ソースコードをダウンロード

2 CSS とSCRIPTを読み込む

<link rel="stylesheet" href="../dist/remodal.css">
<link rel="stylesheet" href="../dist/remodal-default-theme.css">

<script src="../dist/remodal.min.js"></script>

こちら、テーマも必ず読み込むこと

3 モーダルとボタンを記述

モーダル

<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>

ボタン

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

モーダルの開き方

単純にhrefで呼び出したり、

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

若しくはdata-remodal-target属性で呼び出したり出来る。

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

後述するハッシュとのひも付けが有効なときのみ前者が利用可能。

ハッシュとのひも付けを無効にする際には、後者の呼び出し方法を利用しなければならない。

オプション

オプションを変更する事で挙動のカスタマイズも簡単に行える。

• hashTracking:デフォルト(true)ではモーダルのActive化はハッシュと紐づく形で実装されている。
• closeOnConfirm: デフォルト(true)ではconfirmボタンを押したタイミングでモーダルが閉じられる。
• closeOnCancel: デフォルト(true)ではcancelボタンを押したタイミングでモーダルが閉じられる。
• closeOnEscape: デフォルト(true)ではESCキーを押したタイミングでモーダルが閉じられる。
• closeOnOutsideClick: デフォルト(true)では背景を押したタイミングでモーダルが閉じられる。

オプションは属性で設定できるほか、スクリプトでグローバルに登録することも可能。

属性での設定

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

スクリプトでの設定

<script>
window.REMODAL_GLOBALS = {
  NAMESPACE: 'modal',
  DEFAULTS: {
    hashTracking: false
  }
};
</script>
<script src="../dist/remodal.js"></script>