remodal.js で手軽にモーダルウィンドウを実装する¶

remodal.jsとは¶

簡単にレスポンシブで軽くて早いモーダル機能をを実装できる！

使い方¶

Step1 ファイルを読み込む¶

Github のdist以下のファイルを読み込む

remodel.min.js
remodel.css
remodel-default-theme.css

Code

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

Step2 モーダルを準備する¶

以下は公式のサンプルに微妙に手を加えたもの。
ボタンの間の隙間とボタン下のスペースを追加した。
本当は公式に乗っているCSSのためのクラスを上書きするべき。

<div id="modal1" 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>
  &nbsp;&nbsp;&nbsp;
  <button data-remodal-action="confirm" class="remodal-confirm">OK</button>
  <br/>
</div>

Step3 モーダルを操作する¶

リンクから呼び出す

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

jQueryをつかって操作する

var moda = $("#modal1").remodal(); // モーダルオブジェクトをつくる
// 何かをクリックしたときにモーダルを開く
$("#something_to_open_modal").on("click",function(){
    modal.open();
});
// 確認ボタンを押したら閉じる
$(document).on('confirmation', '.remodal', function () {
    modal.close();
    // and do somothing...
});
// キャンセルボタンを押したら閉じる
$(document).on('cancellation', '.remodal', function () {
    modal.close();
    // and do somothing...
});

見た目を変える¶

デフォルトだとちょっと見た目がいまいちだったので以下の変更をしてみる。

モーダルの外は覆い隠さない
モーダル背景を半透明にする

style.css ( remodal の css ２つよりも後に読み込む )

.remodal-overlay,
.remodal-wrapper {
  background-color: rgba(0,0,0,0);
}
.remodal{
  color:white;
  background-color: rgba(10,50,20,0.8) ;
  padding-bottom: 10px; /*ついでにボタンの下もこっちで変える*/
}

感想¶

UI Bootstrap に慣れていたので違う環境でモーダルを作るのに戸惑った。
remodal.js は見た目に bootstrap 感あって違和感なく使えた。
何よりも実装が直感的で簡単だったのがよかった。