jqueryで確認ダイアログをカスタマイズする方法

jquery javascript

といいつつ、カスタマイズではなくてjqueryのプラグインの紹介です

jquery.remodal.jsというプラグインがあるのですがコレを使います
ここからダウンロード

src/ の中の以下の2ファイルを使用します
jquery.remodal.css
jquery.remodal.js

で，使い方は以下のような形でとても簡単に使用できます

<link rel="stylesheet" type="text/css" href="./jquery.remodal.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="./jquery.remodal.js"></script>

<a href="#modal">削除する</a>

<div class="remodal" data-remodal-id="modal">
  <h1>確認</h1>
  <p>削除してもよろしいでしょうか？</p>
  <br>
  <a class="remodal-cancel" href="#">NO</a>
  <a class="remodal-confirm" href="#">YES</a>
</div>

<script>
$(".remodal-confirm").click(function() {
  //yesを押されたときの処理
});
$(".remodal-cancel").click(function() {
  //noを押されたときの処理
});
</script>



サンプルの挙動はこんな感じになります。いい感じですね
おしてみてね


確認

削除してもよろしいでしょうか？

NO
YES

リンク集へ