25

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?

João Paulo
  • 6,300
  • 4
  • 51
  • 80

8 Answers8

26

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});
Daniele Piccioni
  • 503
  • 6
  • 12
19

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">
...
Fernando Vieira
  • 3,177
  • 29
  • 26
10

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

João Paulo
  • 6,300
  • 4
  • 51
  • 80
jollyGreen
  • 126
  • 2
  • 8
6

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';
Parikshit Sarkar
  • 570
  • 5
  • 6
4

For Bootstrap 5+, data-bs-backdrop="static" html attribute should be used, this is because Bootstrap adds bs for their direct attributes on html tags.

João Paulo
  • 6,300
  • 4
  • 51
  • 80
Rahul Garg
  • 41
  • 1
3

I wanted to disable closing of a modal while an AJAX request was completing.

@jollyGreen got me going in the right direction, but in bootstrap 4, The only way I could do this pragmatically after the modal was already shown was like this:

$("#myModal").data('bs.modal')._config.backdrop = 'static';

That is to say that between v3 and v4 they seem to have changed the options property of the bs.modal data object to _config.

DazBaldwin
  • 4,125
  • 3
  • 39
  • 43
1

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">
sa_n__u
  • 336
  • 1
  • 9
0

Added data-attributes in HTML. It's working on bootstrap 4, bootstrap 3

<div class="modal fade"  tabindex="-1" role="dialog" aria-hidden="true" *data-keyboard="false" data-backdrop="static"*>
    <div class="modal-dialog modal-lg" role="document"><div class="modal-content"></div></div>
</div>

In jQuery

$('div.modal').modal({
    backdrop: 'static',
    keyboard: false,
    show: false
});
rsmdh
  • 128
  • 1
  • 2
  • 12