jQuery

【jQuery】Bootstrap・jQueryを使用したダイアログを実装。jquery.confirm

December 23, 2016
jQuery Confirm

【jQuery】一度は使ってみたくなる、色んなモーダルウィンドウプラグイン10選でご紹介したjquery.confirm。jquery.confirmはBootstrap、jQueryを使用して、ボタンやリンクのためのダイアログを実装

インストール

  1. jQuery > 1.8
  2. Bootstrap 3 for the modals

使用方法

<a href="home" class="confirm">Go to home</a>
$(".confirm").confirm();

オプション

  1. text: テキストをダイアログに表示
  2. title: ダイアログのタイトル
  3. confirm: ハンドラが実行された場合、ユーザー確認
  4. cancel: ユーザーがキャンセルしたときにハンドラが実行
  5. confirmButton: 確認ボタンのラベル
  6. cancelButton: キャンセルボタンのラベル
  7. post: false(デフォルト)ハンドラが設定されている場合、GET要求にボタン/リンクのURLにユーザーをリダイレクト。trueの場合、(フォームの送信など)のPOSTリクエストでリダイレクト
  8. submitForm: false(デフォルト)の場合、効果なく、trueの場合、フォームのターゲット要素を返す
  9. confirmButtonClass: 確認ボタン用のHTMLクラス
  10. cancelButtonClass: キャンセルボタンのためのHTMLクラス
  11. dialogClass: ダイアログのためのHTMLクラス

<button class="confirm" type="button">Delete the comment</button>
$(".confirm").confirm({
    text: "Are you sure you want to delete that comment?",
    title: "Confirmation required",
    confirm: function(button) {
        delete();
    },
    cancel: function(button) {
        // nothing to do
    },
    confirmButton: "Yes I am",
    cancelButton: "No",
    post: true,
    confirmButtonClass: "btn-danger",
    cancelButtonClass: "btn-default",
    dialogClass: "modal-dialog modal-lg" // Bootstrap classes for large modal
});
<button class="confirm" type="button"
        data-text="Do you really want to delete that comment?"
        data-confirm-button="Yes I am"
        data-cancel-button="Whoops no">
    Delete the user
</button>
$(".confirm").confirm();

Manual triggering

// Will immediately show the confirmation popup
$.confirm({
    text: "Are you sure you want to delete that comment?",
    confirm: function() {
        delete();
    },
    cancel: function() {
        // nothing to do
    }
});

Global configuration

$.confirm.options = {
    text: "Are you sure?",
    title: "",
    confirmButton: "Yes",
    cancelButton: "Cancel",
    post: false,
    submitForm: false,
    confirmButtonClass: "btn-warning",
    cancelButtonClass: "btn-default",
    dialogClass: "modal-dialog"
}

MITライセンス