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

【jQuery】一度は使ってみたくなる、色んなモーダルウィンドウプラグイン10選でご紹介したjquery.confirm。jquery.confirmはBootstrap、jQueryを使用して、ボタンやリンクのためのダイアログを実装
<a href="home" class="confirm">Go to home</a>
$(".confirm").confirm();
text
: テキストをダイアログに表示title
: ダイアログのタイトルconfirm
: ハンドラが実行された場合、ユーザー確認cancel
: ユーザーがキャンセルしたときにハンドラが実行confirmButton
: 確認ボタンのラベルcancelButton
: キャンセルボタンのラベルpost
: false(デフォルト)ハンドラが設定されている場合、GET要求にボタン/リンクのURLにユーザーをリダイレクト。trueの場合、(フォームの送信など)のPOSTリクエストでリダイレクトsubmitForm
: false(デフォルト)の場合、効果なく、trueの場合、フォームのターゲット要素を返すconfirmButtonClass
: 確認ボタン用のHTMLクラスcancelButtonClass
: キャンセルボタンのためのHTMLクラス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();
// 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 } });
$.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ライセンス