jQueryのモーダルウインドウライブラリRemodalの使い方について解説します。
サンプルも掲載しているので、動作も合わせてご確認頂けます。
目次
Remodalのダウンロード
まずは、GitHubからソースファイルをダウンロードしてcssとjsをサーバーに設置します。
必要なファイルは、解凍したフォルダの「dist」配下の３つファイルです。
https://github.com/VodkaBears/Remodal/releases/tag/1.1.0
- 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です。
上記のソースで実装したボタンがこちらになります。
動作をお試し下さい。
まとめ
簡単に実装できました。
この記事のサンプルをコピペして文言やイベントハンドラの内容を修正すると実装の手間も少しは省けるかなと思います。
少しでもこの記事が参考になれば幸いです。
最後までお読み頂きありがとうございました。
サンプルです。
