jQuery

【jQuery】カスタマイズ可能なモーダルウィンドウプラグインRemodal

December 21, 2018
Remodal

Remodalはカスタマイズ可能なモーダルウィンドウプラグイン。レスポンシブ、軽量、CSSアニメーション。

Start

CSSファイルをインクルード

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

JSファイルをインクルード

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

モーダルの背景コンテナを定義。

<div class="remodal-bg">
...Page content...
</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>

ハッシュで呼び出す。

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

Or:

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

data-remodal-options属性を使用して追加のオプションを渡す

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

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

MIT