确认删除使用引导3模式框
我需要确认删除使用引导3模式框（是/否）。 怎么能创build这个？
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> 你需要在你的HTML模式。 当删除button被点击它popup模式。 防止点击该button提交表单也很重要。 点击确认后，提交表格。
$('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="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>
您可以使用Bootbox对话框
$(document).ready(function() { $('#btnDelete').click(function() { bootbox.confirm("Are you sure want to delete?", function(result) { alert("Confirm result: " + result); }); }); });
Plunker演示
使用模态的简单方法是使用eModal ！
来自github的 Ex：
- 链接到eModal.js
<script src="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="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="saribe/eModal/master/dist/eModal.min.js"></script>
我今天也有同样的问题，这是我的解决scheme（我认为更好，更简单）：
<!-- 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").one('click', onConfirm); $("#confirmOk").one('click', fClose); $("#confirmCancel").one("click", fClose); }
使用one而不是on可以防止在下次打开对话框时调用去除函数。
我希望这可能会有所帮助。
遵循一个完整的例子：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Confirm dialog example</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="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"/> </head> <body> <!-- 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> </body> <script> var YOUR_MESSAGE_STRING_CONST = "Your confirm message?"; $('#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").one('click', onConfirm); $("#confirmOk").one('click', fClose); $("#confirmCancel").one("click", fClose); } </script> </html>
$('.launchConfirm').on('click', function (e) { $('#confirm') .modal({ backdrop: 'static', keyboard: false }) .one('click', '#delete', function (e) { //delete function }); });
小提琴
对于你的button：
<button class='btn btn-danger btn-xs launchConfirm' type="button" name="remove_levels"><span class="fa fa-times"></span> delete</button></td>
用id =“确认”在HTML中创build模式对话框并使用showConfirmation函数。
还要记住你应该隐藏模式对话框后取消（modal.unbind（））取消和成功button。 如果你不这样做，你会得到双重约束力。 例如：如果你打开对话框一次，然后按“取消”，然后第二次打开对话框，然后按“确定”，你将得到2成功执行callback。
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(); } });
以下解决scheme比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'); }
