確認刪除使用引導3模式框

Question

我需要確認刪除使用引導3模式框（是/否）。如何創建這個？

HTML代碼：

<form action ="<?php echo $URL .'/admin/privileges.php?action=editable' ?>" method="POST"> 
<button class='btn btn-danger btn-xs' type="submit" name="remove_levels" value="delete"><span class="fa fa-times"></span> delete</button></td> 
</form> 

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'); 
 
    }); 
 
});

<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script> 
 
<form action="#" method="POST"> 
 
    <button class='btn btn-danger btn-xs' type="submit" name="remove_levels" value="delete"><span class="fa fa-times"></span> delete</button> 
 
</form> 
 

 
<div id="confirm" class="modal hide fade"> 
 
    <div class="modal-body"> 
 
    Are you sure? 
 
    </div> 
 
    <div class="modal-footer"> 
 
    <button type="button" data-dismiss="modal" class="btn btn-primary" id="delete">Delete</button> 
 
    <button type="button" data-dismiss="modal" class="btn">Cancel</button> 
 
    </div> 
 
</div>

Answer 2

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

FIDDLE

爲了您的按鈕：

<button class='btn btn-danger btn-xs launchConfirm' type="button" name="remove_levels"><span class="fa fa-times"></span> delete</button></td> 

Answer 3

您可以使用Bootbox對話框

$(document).ready(function() { 

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

Plunker Demo

Answer 4

使用情態動詞簡單的方法是用eModal！

防爆從github：

1. 鏈接eModal.js <script src="//rawgit.com/saribe/eModal/master/dist/eModal.min.js"></script>

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);

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script> 
 
<script src="//rawgit.com/saribe/eModal/master/dist/eModal.min.js"></script>

提示：您可以使用更改默認的標籤名稱！ {label：'是'| 「真」 | 'OK'}

Answer 5

使用id =「confirmation」在HTML中創建模式對話框並使用showConfirmation函數。

還記得你應該在隱藏模態對話框後解除（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 6

我今天已經同樣的問題，這是我的解決方案（我認爲是更好更簡單）：

<!-- Modal dialog --> 
<div class="modal fade" id="frmPrenotazione" tabindex="-1"> 
    <!-- CUTTED --> 
    <div id="step1" class="modal-footer"> 
     <button type="button" class="glyphicon glyphicon-erase btn btn-default" id="btnDelete"> Delete</button> 
    </div> 
</div> 

<!-- Modal confirm --> 
<div class="modal" id="confirmModal" style="display: none; z-index: 1050;"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-body" id="confirmMessage"> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" id="confirmOk">Ok</button> 
       <button type="button" class="btn btn-default" id="confirmCancel">Cancel</button> 
      </div> 
     </div> 
    </div> 
</div> 

而且在我的.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); 
} 

在one之前使用unbind可防止移除函數在對話框的下一次打開時被調用。

我希望這可能會有所幫助。

按照一個完整的例子：

var YOUR_MESSAGE_STRING_CONST = "Your confirm message?"; 
 
     $('#btnDelete').on('click', function(e){ 
 
    \t \t confirmDialog(YOUR_MESSAGE_STRING_CONST, function(){ 
 
    \t \t \t //My code to delete 
 
      console.log("deleted!"); 
 
    \t \t }); 
 
    \t }); 
 

 
     function confirmDialog(message, onConfirm){ 
 
    \t  var fClose = function(){ 
 
    \t \t \t modal.modal("hide"); 
 
    \t  }; 
 
    \t  var modal = $("#confirmModal"); 
 
    \t  modal.modal("show"); 
 
    \t  $("#confirmMessage").empty().append(message); 
 
    \t  $("#confirmOk").unbind().one('click', onConfirm).one('click', fClose); 
 
    \t  $("#confirmCancel").unbind().one("click", fClose); 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<!-- Modal dialog --> 
 
<div id="frmTest" tabindex="-1"> 
 
    <!-- CUTTED --> 
 
     <div id="step1" class="modal-footer"> 
 
    <button type="button" class="glyphicon glyphicon-erase btn btn-default" id="btnDelete"> Delete</button> 
 
    </div> 
 
</div> 
 

 
    <!-- Modal confirm --> 
 
<div class="modal" id="confirmModal" style="display: none; z-index: 1050;"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <div class="modal-body" id="confirmMessage"> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" id="confirmOk">Ok</button> 
 
      <button type="button" class="btn btn-default" id="confirmCancel">Cancel</button> 
 
      </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 7

以下解決方案比bootbox.js更好，因爲

• 它可以做一切bootbox.js能做;
• 使用語法比較簡單
• 它可以讓你使用「錯誤」，「警告」或「信息」
• Bootbox是986線長，礦山只有110線長
典雅控制你的消息的顏色

digimango.messagebox.js：

const dialogTemplate = '\ 
 
    <div class ="modal" id="digimango_messageBox" role="dialog">\ 
 
     <div class ="modal-dialog">\ 
 
      <div class ="modal-content">\ 
 
       <div class ="modal-body">\ 
 
        <p class ="text-success" id="digimango_messageBoxMessage">Some text in the modal.</p>\ 
 
        <p><textarea id="digimango_messageBoxTextArea" cols="70" rows="5"></textarea></p>\ 
 
       </div>\ 
 
       <div class ="modal-footer">\ 
 
        <button type="button" class ="btn btn-primary" id="digimango_messageBoxOkButton">OK</button>\ 
 
        <button type="button" class ="btn btn-default" data-dismiss="modal" id="digimango_messageBoxCancelButton">Cancel</button>\ 
 
       </div>\ 
 
      </div>\ 
 
     </div>\ 
 
    </div>'; 
 

 

 
// 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'); 
 
}

要使用digimango.messagebox.js：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
    <title>A useful generic message box</title> 
 
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 
 

 
    <link rel="stylesheet" type="text/css" href="~/Content/bootstrap.min.css" media="screen" /> 
 
    <script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script> 
 
    <script src="~/Scripts/bootstrap.js" type="text/javascript"></script> 
 
    <script src="~/Scripts/bootbox.js" type="text/javascript"></script> 
 

 
    <script src="~/Scripts/digimango.messagebox.js" type="text/javascript"></script> 
 

 

 
    <script type="text/javascript"> 
 
     function testAlert() { 
 
      messageBox('Something went wrong!', 'error'); 
 
     } 
 

 
     function testAlertWithCallback() { 
 
      messageBox('Something went wrong!', 'error', null, function() { 
 
       messageBox('OK clicked.'); 
 
      }); 
 
     } 
 

 
     function testConfirm() { 
 
      messageBox('Do you want to proceed?', 'warning', { okButtonName: 'Yes', cancelButtonName: 'No' }, function() { 
 
       messageBox('Are you sure you want to proceed?', 'warning', { okButtonName: 'Yes', cancelButtonName: 'No' }); 
 
      }); 
 
     } 
 

 
     function testPrompt() { 
 
      messageBox('How do you feel now?', 'normal', { showTextBox: true }, function (userInput) { 
 
       messageBox('User entered "' + userInput + '".'); 
 
      }); 
 
     } 
 

 
     function testPromptWithDefault() { 
 
      messageBox('How do you feel now?', 'normal', { showTextBox: true, textBoxDefaultText: 'I am good!' }, function (userInput) { 
 
       messageBox('User entered "' + userInput + '".'); 
 
      }); 
 
     } 
 

 
    </script> 
 
</head> 
 

 
<body> 
 
    <a href="#" onclick="testAlert();">Test alert</a> <br/> 
 
    <a href="#" onclick="testAlertWithCallback();">Test alert with callback</a> <br /> 
 
    <a href="#" onclick="testConfirm();">Test confirm</a> <br/> 
 
    <a href="#" onclick="testPrompt();">Test prompt</a><br /> 
 
    <a href="#" onclick="testPromptWithDefault();">Test prompt with default text</a> <br /> 
 
</body> 
 

 
</html>