使用Bootstrap 3模式框确认删除

我需要使用Bootstrap 3模式框确认删除（是/否）。 我该如何创建呢？

HTML代码：

<form action ="" method="POST">   Delete   

Answer 1

您需要HTML中的模态。 单击删除按钮时，会弹出模式。 防止点击该按钮提交表单也很重要。 单击确认后，将提交表单。

 $('button[name="remove_levels"]').on('click', function(e) { var $form = $(this).closest('form'); e.preventDefault(); $('#confirm').modal({ backdrop: 'static', keyboard: false }) .one('click', '#delete', function(e) { $form.trigger('submit'); }); }); 

    
  delete 
 
 
 Are you sure? 
 
 Delete Cancel 
  

Answer 2

您可以使用Bootbox对话框

 $(document).ready(function() { $('#btnDelete').click(function() { bootbox.confirm("Are you sure want to delete?", function(result) { alert("Confirm result: " + result); }); }); }); 

Plunker演示

Answer 3

使用模态的简单方法是使用eModal ！

来自github的 Ex：

1. 链接到eModal.js

  var options = { message: "The famouse question?", title: 'Header title', size: 'sm', callback: function(result) { result ? doActionTrue(result) : doActionFalse(); }, subtitle: 'smaller text header', label: "True" // use the possitive lable as key //... }; eModal.confirm(options); 

Answer 4

我今天遇到了同样的问题，这是我的解决方案（我认为更好更简单）：

  
  
  Delete 
 
  
 
 
 
 
 
 Ok Cancel 
 
 
  

在我的.js中：

 $('#btnDelete').on('click', function(e){ confirmDialog(YOUR_MESSAGE_STRING_CONST, function(){ //My code to delete }); }); function confirmDialog(message, onConfirm){ var fClose = function(){ modal.modal("hide"); }; var modal = $("#confirmModal"); modal.modal("show"); $("#confirmMessage").empty().append(message); $("#confirmOk").unbind().one('click', onConfirm).one('click', fClose); $("#confirmCancel").unbind().one("click", fClose); } 

在使用unbind之前使用unbind可以防止在下一次打开对话框时调用remove函数。

我希望这可能会有所帮助。

按照一个完整的例子：

 var YOUR_MESSAGE_STRING_CONST = "Your confirm message?"; $('#btnDelete').on('click', function(e){ confirmDialog(YOUR_MESSAGE_STRING_CONST, function(){ //My code to delete console.log("deleted!"); }); }); function confirmDialog(message, onConfirm){ var fClose = function(){ modal.modal("hide"); }; var modal = $("#confirmModal"); modal.modal("show"); $("#confirmMessage").empty().append(message); $("#confirmOk").unbind().one('click', onConfirm).one('click', fClose); $("#confirmCancel").unbind().one("click", fClose); } 

     
  
  Delete 
 
  
 
 
 
 
 
 Ok Cancel 
 
 
  

Answer 5

 $('.launchConfirm').on('click', function (e) { $('#confirm') .modal({ backdrop: 'static', keyboard: false }) .one('click', '#delete', function (e) { //delete function }); }); 

小提琴

对于您的按钮：

  delete 

Answer 6

使用id =“confirm”在HTML中创建模式对话框并使用函数showConfirmation。

还记得你应该在隐藏modal dialog后取消绑定（modal.unbind（））取消和成功按钮。 如果你不这样做，你会得到双重绑定。 例如：如果您打开一次对话框并按“取消”然后再次打开对话框并按“确定”，您将获得2次成功回调执行。

 showConfirmation = function(title, message, success, cancel) { title = title ? title : 'Are you sure?'; var modal = $("#confirmation"); modal.find(".modal-title").html(title).end() .find(".modal-body").html(message).end() .modal({ backdrop: 'static', keyboard: false }) .on('hidden.bs.modal', function () { modal.unbind(); }); if (success) { modal.one('click', '.modal-footer .btn-primary', success); } if (cancel) { modal.one('click', '.modal-header .close, .modal-footer .btn-default', cancel); } }; // bind confirmation dialog on delete buttons $(document).on("click", ".delete-event, .delete-all-event", function(event){ event.preventDefault(); var self = $(this); var url = $(this).data('url'); var success = function(){ alert('window.location.href=url'); } var cancel = function(){ alert('Cancel'); }; if (self.data('confirmation')) { var title = self.data('confirmation-title') ? self.data('confirmation-title') : undefined; var message = self.data('confirmation'); showConfirmation(title, message, success, cancel); } else { success(); } }); 

https://jsfiddle.net/yiiBoy/hne9sp6g/

Answer 7

以下解决方案比bootbox.js更好 ，因为

• 它可以做bootbox.js可以做的一切;
• 使用语法更简单
• 它允许您使用“错误”，“警告”或“信息”优雅地控制邮件的颜色
• Bootbox长986线，我的线只有110线

digimango.messagebox.js ：

 const dialogTemplate = '\ 
\ 
\ 
\ 
\ 
Some text in the modal.
\ 
\ 
\ 
\ OK\ Cancel\ 
\ 
\ 
\ 
'; // See the comment inside function digimango_onOkClick(event) { var digimango_numOfDialogsOpened = 0; function messageBox(msg, significance, options, actionConfirmedCallback) { if ($('#digimango_MessageBoxContainer').length == 0) { var iDiv = document.createElement('div'); iDiv.id = 'digimango_MessageBoxContainer'; document.getElementsByTagName('body')[0].appendChild(iDiv); $("#digimango_MessageBoxContainer").html(dialogTemplate); } var okButtonName, cancelButtonName, showTextBox, textBoxDefaultText; if (options == null) { okButtonName = 'OK'; cancelButtonName = null; showTextBox = null; textBoxDefaultText = null; } else { okButtonName = options.okButtonName; cancelButtonName = options.cancelButtonName; showTextBox = options.showTextBox; textBoxDefaultText = options.textBoxDefaultText; } if (showTextBox == true) { if (textBoxDefaultText == null) $('#digimango_messageBoxTextArea').val(''); else $('#digimango_messageBoxTextArea').val(textBoxDefaultText); $('#digimango_messageBoxTextArea').show(); } else $('#digimango_messageBoxTextArea').hide(); if (okButtonName != null) $('#digimango_messageBoxOkButton').html(okButtonName); else $('#digimango_messageBoxOkButton').html('OK'); if (cancelButtonName == null) $('#digimango_messageBoxCancelButton').hide(); else { $('#digimango_messageBoxCancelButton').show(); $('#digimango_messageBoxCancelButton').html(cancelButtonName); } $('#digimango_messageBoxOkButton').unbind('click'); $('#digimango_messageBoxOkButton').on('click', { callback: actionConfirmedCallback }, digimango_onOkClick); $('#digimango_messageBoxCancelButton').unbind('click'); $('#digimango_messageBoxCancelButton').on('click', digimango_onCancelClick); var content = $("#digimango_messageBoxMessage"); if (significance == 'error') content.attr('class', 'text-danger'); else if (significance == 'warning') content.attr('class', 'text-warning'); else content.attr('class', 'text-success'); content.html(msg); if (digimango_numOfDialogsOpened == 0) $("#digimango_messageBox").modal(); digimango_numOfDialogsOpened++; } function digimango_onOkClick(event) { // JavaScript's nature is unblocking. So the function call in the following line will not block, // thus the last line of this function, which is to hide the dialog, is executed before user // clicks the "OK" button on the second dialog shown in the callback. Therefore we need to count // how many dialogs is currently showing. If we know there is still a dialog being shown, we do // not execute the last line in this function. if (typeof (event.data.callback) != 'undefined') event.data.callback($('#digimango_messageBoxTextArea').val()); digimango_numOfDialogsOpened--; if (digimango_numOfDialogsOpened == 0) $('#digimango_messageBox').modal('hide'); } function digimango_onCancelClick() { digimango_numOfDialogsOpened--; if (digimango_numOfDialogsOpened == 0) $('#digimango_messageBox').modal('hide'); }