I found a workaround for this issue.
Once the modal has been hidden bootstrap data still remains on it. To prevent that I had the following:
$('#myModal').modal('show'); //display something
//...
// if you don't want to lose the reference to previous backdrop
$('#myModal').modal('hide');
$('#myModal').data('bs.modal',null); // this clears the BS modal data
//...
// now works as you would expect
$('#myModal').modal({backdrop:'static', keyboard:false});
Answer from Daniele Piccioni on Stack OverflowI found a workaround for this issue.
Once the modal has been hidden bootstrap data still remains on it. To prevent that I had the following:
$('#myModal').modal('show'); //display something
//...
// if you don't want to lose the reference to previous backdrop
$('#myModal').modal('hide');
$('#myModal').data('bs.modal',null); // this clears the BS modal data
//...
// now works as you would expect
$('#myModal').modal({backdrop:'static', keyboard:false});
I had the same problem with Bootstrap 4.1.1 and it only worked when I added the data attributes to the html
<div class="modal fade show" id="myModal" tabindex="-1" role="dialog"
style="display: block;" data-keyboard="false" data-backdrop="static">
...
As per Bootstrap docs:
Clicking on the modal “backdrop” will automatically close the modal.
When backdrop is set to static, the modal will not close when clicking outside it.
Via JS:
$('#myModal').modal({
backdrop: 'static',
keyboard: false
})
$('#myModal').modal({backdrop: 'static', keyboard: false}, 'show');
Via HTML:
<a data-controls-modal="your_div_id" data-backdrop="static" data-keyboard="false" href="#">
Works too, data-backdrop="static" to click out and data-keyboard="false" to Esc in your div modal:
<div id="idModal" class="modal hide" data-backdrop="static" data-keyboard="false">
On Options chapter, in the page you linked, you can see the backdrop option. Passing this option with value 'static' will prevent closing the modal.
As @PedroVagner pointed on comments, you also can pass {keyboard: false} to prevent closing the modal by pressing Esc.
If you opening the modal by js use:
$('#myModal').modal({backdrop: 'static', keyboard: false})
If you are using data attributes, use:
<button data-target="#myModal" data-toggle="modal" data-backdrop="static" data-keyboard="false">
Launch demo modal
</button>`
This is the easiest one
You can define your modal behavior, defining data-keyboard and data-backdrop.
<div id="modal" class="modal hide fade in" data-keyboard="false" data-backdrop="static">
Ok I solved this. Maybe it is not the best solution, but it is working for my special case.
I added $('#myModal').off('click'); just after I show loading spinner on submit. This prevents from closing modal with mouse click.
There was a problem with disabling escape button, because browsers stops page loading when user press this button. So I decided to hide the spinner to unlock the form with this code:
$(document).on('keydown',function(e) {
if (e.keyCode == 27) {
$('#myLoadingSpinner').hide();
}
});
Edit:
I found another solution for backdrop:
$('#myModal').data('bs.modal').options.backdrop = 'static';
I tried this also for keyboard = false, but it doesn't work.
I had a modal that could be opened 2 different ways. When the user opened it one way, I wanted them to be able to close the modal. When they opened it the other way I didn't want them to be able to close it.
I found this question and used the solution from the original poster. I also tried adding keyboard which now works:
$('#myModal').data('bs.modal').options.backdrop = 'static';
$('#myModal').data('bs.modal').options.keyboard = false;