JavaScript

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

投稿日:2016年11月8日 更新日:



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です!
上記のソースで実装したボタンがこちらになります。

動作をお試し下さい。

まとめ

簡単に実装できますね!

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

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

サンプルです。


スポンサーリンク


-JavaScript

執筆者:

関連記事

【JavaScript】Select2ライブラリの検索方式を前方一致に変更する方法【コピペで対応】

JavaScriptのライブラリのSelect2で前方一致検索させる方法についての説明です。 Select2はデフォルトでは部分一致検索されるのですが、それを前方一致にする方法になります。 コピペで簡 …

プロフィール

このサイトを運営しているDENです。
アングラーのフリープログラマー。 主にプログラミングと釣の話を発信しています。
プログラミングで自由になり思う存分に釣りをしまくる生活実践中。
詳しいプロフィールはこちら 
フォスターフリーランス