[英]How to restrict the close icon of the bootbox modal to close the modal not to fire cancel
我已经实现了用于警告的引导箱。 我面临两个我无法解决的问题。 当我单击一个按钮时,将通过两个按钮“是”和“否”打开引导确认窗口。 但是,当我单击右上角的关闭按钮时,我猜想此框将被关闭,而是触发了取消按钮。 另一个问题是,当单击“ Esc”按钮时,还会触发关闭按钮。 谁能告诉我如何限制这个问题。
$(function() { $('.alert').on('click', function() { bootbox.confirm({ message: "This is a confirm with custom button text and color! Do you like it?", buttons: { confirm: { label: 'Yes', className: 'btn btn-primary' }, cancel: { label: 'No', className: 'btn btn-default' } }, callback: function(result) { if (result == true) { bootbox.prompt({ title: "This is a prompt with a set of checkbox inputs!", className: 'box 2', callback: function(result) { console.log(result); } }); } else if (result == false) { alert('you have clicked No Button'); } else { alert("There is some Error"); } console.log('This was logged in the callback: ' + result); } }); }) })
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/css/bootstrap-dialog.min.css" rel="stylesheet" type="text/css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/js/bootstrap-dialog.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script> <p>Content here. <a class="alert" href=#>Alert!</a></p>
<script>
$(function() {
$('.alert').on('click', function() {
var onSubmit = function() {
//Process form data
alert("Submit");
dialog.modal('hide');
}
var onCancel = function()
{
bootbox.dialog({
message: '<input class="form-control input-sm" id="inputsm" type="text">',
title: "Custom label",
onEscape: true,
buttons: {
main: {
label: "Save",
className: "btn-primary",
callback: function() {
console.log("Save");
}
}
}
})
}
var dialog = bootbox.dialog({
message: "Perform this task?",
onEscape: true,
buttons: {
cancel: {
label: 'No',
className: 'btn-default',
callback: onCancel
},
confirm: {
label: 'Yes',
className: 'btn-primary',
callback: onSubmit // Handles OK button
}
}
});
})
})
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.