jQueryによる確認ダイアログの例

基本的な確認ダイアログの表示: 以下の例では、ボタンをクリックすると「OK」または「キャンセル」の選択肢を持つ確認ダイアログが表示されます。

<button id="confirmButton">確認</button>
<script>
$(document).ready(function() {
  $("#confirmButton").click(function() {
    if (confirm("本当に実行しますか？")) {
      alert("実行しました。");
    } else {
      alert("キャンセルしました。");
    }
  });
});
</script>

カスタムボタンラベルを持つ確認ダイアログ: 以下の例では、確認ダイアログのボタンにカスタムのラベルを設定しています。

<button id="customConfirmButton">確認</button>
<script>
$(document).ready(function() {
  $("#customConfirmButton").click(function() {
    var options = {
      title: "確認",
      message: "本当に実行しますか？",
      buttons: {
        confirm: {
          label: "はい",
          className: "btn-success"
        },
        cancel: {
          label: "いいえ",
          className: "btn-danger"
        }
      },
      callback: function(result) {
        if (result) {
          alert("実行しました。");
        } else {
          alert("キャンセルしました。");
        }
      }
    };
    bootbox.confirm(options);
  });
});
</script>

モーダルダイアログとしての確認ダイアログ: 以下の例では、Bootstrapのモーダルダイアログを使用して確認ダイアログを実装しています。

<button id="modalConfirmButton">確認</button>
<div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="confirmModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="confirmModalLabel">確認</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        本当に実行しますか？
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-success" id="modalConfirm">はい</button>
        <button type="button" class="btn btn-danger" data-dismiss="modal">いいえ</button>
      </div>
    </div>
  </div>
</div>
<script>
$(document).ready(function() {
  $("#modalConfirmButton").click(function() {
    $("#confirmModal").modal("show");
  });
  $("#modalConfirm").click(function() {
    $("#confirmModal").modal("hide");
    alert("実行しました。");
  });
});
</script>

上記のコード例を使用することで、ウェブページ上で確認ダイアログを実装することができます。必要に応じて、それぞれの例をカスタマイズして使用してください。