ITエンジニア/デザイナ向けにオープンソースを毎日紹介

jQueryでモーダルウィンドウ表示を行いたい時に使えるのがRemodalです。カスタマイズが多彩、軽量といった特徴があります。

ふわっと浮き出るのも印象的です。
ふわっと浮き出るのも印象的です。

Remodalのインストール

まず手順としてスタイルシートとJavaScriptを読み込みます。

<link rel="stylesheet" href="path/to/your/jquery.remodal.css">
<script src="path/to/your/jquery.remodal.min.js"></script>

次にHTML全体をクラスで囲みます(背景を暗くするためです)。

<div class="remodal-bg">
  ここにHTMLを記述
</div>

そしてモーダルウィンドウで表示する内容を記述します。

<div class="remodal" data-remodal-id="modal">
    <h1>Remodal</h1>
    <p>
      Flat, responsive, lightweight, fast, easy customizable modal window plugin
      with declarative state notation and hash tracking.
    </p>
    <br />
    <a class="remodal-cancel" href="#">Cancel</a>
    <a class="remodal-confirm" href="#">OK</a>
</div>

後はクリックするHTMLを記述します。

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

これで完了です。

Showボタンを押すと表示されます。
Showボタンを押すと表示されます。

イベントのトラッキングも多彩で、各イベントごとにコールバックを受けられます。

$(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);
});

実際、処理としては記述する内容が多いので、自分好みにカスタマイズできる範囲が大きそうです。デザインはフラットで使い勝手良さそうですが、カスタマイズももちろん可能です。なおZepto.jsとの組み合わせも利用可能です。

ちなみにiPhoneの場合は画面全体に広がります。
ちなみにiPhoneの場合は画面全体に広がります。

RemodalはjQuery/JavaScript製のオープンソース・ソフトウェア(MIT License)です。

VodkaBears/Remodal

Remodal

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2