Bootstrap modal backdrop = 'static' not working
Solution 1
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});
Solution 2
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">
...
Solution 3
Similar to Daniele Piccioni but a bit more concise:
$('#myModal').modal({backdrop: true, keyboard: false, show: true});
$('#myModal').data('bs.modal').options.backdrop = 'static';
This is for Bootstrap 3.+
See also: Change Bootstrap modal option once it already exists
Solution 4
There are two ways to handle this:
1) You can directly add the data-attributes into the HTML -
<div class="modal fade show" id="myModal" tabindex="-1" role="dialog"
style="display: block;" data-keyboard="false" data-backdrop="static">
2) You can use JQuery (For Bootstrap V4) -
$("#myModal").data('bs.modal')._config.backdrop = 'static';
for Bootstrap V3 -
$('#myModal').data('bs.modal').options.backdrop = 'static';
Solution 5
In Angular Try:
[config]="{backdrop: 'static', keyboard: false}"
In the modal div. This solution is working 100%
Eg:
<div bsModal #dangerModal="bs-modal" [config]="{backdrop: 'static', keyboard: false}" class="modal fade" tabindex="-1"
role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
Related videos on Youtube
![João Paulo](https://i.stack.imgur.com/zaRtd.jpg?s=256&g=1)
Comments
-
João Paulo almost 2 years
First, I open my modal using this:
$('#myModal').modal('show');
Then, in another situation, I need that this same modal does not close when pressing ESC/clicking outside, so I use this:
$('#myModal').modal({ backdrop: 'static', keyboard: false })
But once I open my modal by the first method, the second one doesn't work. Any hints?
How can I force
backdrop
value switch to work? -
Luca Detomi over 5 yearsThis is the solution also for Bootstrap 3 in case you open modals using markup instead of JS methods
-
Aryo over 4 yearsYes, this is also true even if the modal was opened using Javascript.
-
Srikrushna almost 3 yearsExplain you answer which will easy to understand