【jQuery】Remodalの使い方とサンプル

[add_remodal]

jQueryのモーダルウインドウライブラリRemodalの使い方について。

簡単に導入できるようにサンプルも掲載しました。

目次

Remodalのダウンロード

まずは、GitHubからソースファイルをダウンロードしてcssとjsをサーバーに設置します。
必要なファイルは、解凍したフォルダの「dist」配下の3つファイルです。

  • remodal.css
  • remodal-default-theme.css
  • remodal.min.js

これらを設置したら、モーダルウインドウを表示させるページでインクルードしてください。

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

モーダルウインドウのHTMLを追加

モーダルウインドウとして表示させる、htmlを記載します。

// モーダルウインドウをオープンするボタン
<button id="btn_chancel">サンプル表示</button>

// 表示されるモーダルウインドウ
<div class="remodal" data-remodal-id="modal">
  <button data-remodal-action="close" class="remodal-close"></button>
      <p>サンプルです。</p>
  <button data-remodal-action="confirm" class="remodal-confirm">はい</button>
  <button data-remodal-action="cancel" class="remodal-cancel">閉じる</button>
</div>

このソースをコピペして適当に文言を変えれば良いかと。

JavaScriptにモーダルウインドウのイベントを実装

モーダルウインドウの「はい」ボタンを押した際の処理を実装します。

$(document).on()で、モーダルウインドウのconfirmationのボタンが押された時の処理を実装しています。

remodal().open()でモーダルウインドウを開きます。

<script type="text/javascript">
	$(function($){
            // 「はい」ボタンが押された後の処理
            $(document).on('confirmation', '.remodal', function () {
		  alert('サンプル表示です。');
	    });
            // モーダルウインドウ表示
	    $("#btn_chancel").click(function(){
		$('[data-remodal-id=modal]').remodal().open();
	    });
	});
</script>

Remodalの動作確認

ここまで実装できたらOKです!
上記のソースで実装したボタンがこちらになります。

動作をお試し下さい。

まとめ

簡単に実装できますね!

この記事のサンプルをコピペして文言やイベントハンドラの内容を修正すると実装の手間も少しは省けるかなと思います。

最後までお読み頂きありがとうございました〜!

サンプルです。


よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次