I have implemented bootbox for alert. I am facing two problem which I could not being able to solve. When I click on a button, a bootbox confirm is opened with two button 'Yes' and 'No' button. But when I click at the close button at top right corner, I guess this box is to be closed but instead it is firing cancel button. Another problem is when is click on 'Esc' button, it is also firing the close button. Can anybody tell me how to restrict this problem.
$(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>