Bootstrap modal backdrop = 'static' not working

bootstrap modal backdrop=static
bootstrap modal close event
bootstrap modal-backdrop fade in
bootstrap modal backdrop not working
bootstrap 3.3.7 modal
bootstrap modal form
bootstrap modal-backdrop color
bootstrap modal backdrop not showing

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?

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});

How to activate the Bootstrap modal-backdrop?, Modal Options. Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-backdrop=� Although the z-index of the .modal is higher than that of the .modal-backdrop, that .modal is in a parent div #content-wrap which has a lower z-index than .modal-backdrop (z-index: 1002 vs z-index: 1030).

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">
...

Bootstrap Modal Dialog showing under Modal Background, <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"> </ <p>The backdrop option specifies whether the modal should have a dark� .modal-content: Styles the modal properly with border, background-color, etc. Use this class to add the modal's header, body, and footer..modal-header: Defines the style for the header of the modal.modal-body: Defines the style for the body of the modal.modal-footer: Defines the style for the footer in the modal. Note: This area is right

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

Bootstrap JS Modal Reference, <meta name="viewport" content="width=device-width, initial-scale=1">. 7. <title> Example of Setting Bootstrap 3 Modal's backdrop Option via Data Attribute</title>. Bootstrap Remove Modal Background Overlay – Sometimes we need to hide bootatrap popup modal overlay background, it can be done in two ways Using – 1. Modal Option, 2.

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';

Modal Options, <button id="btn-confirm" type="button" class="btn btn-primary" data-dismiss=" modal">确认</button>. 9. </div>. 10. </div>. 11. </div>. 12. </div>. JavaScript +� $(window).load(function(){ // remove greying background bootstrap modal effect $(".modal-backdrop ").attr('class', 'someClass'); }); Removing the class removed the modal. But renaming it keeps the functionality but gets rid of the background greying.

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.

Live Demo: Example of Setting Bootstrap 3 Modal's backdrop Option , The modal block is placed inside of a Pjax wrapper. the only way to do something about this at the Bootstrap level would be to use something� Explicitly override the .modal-backdrop and .modal-content zindex style; If all else fails, remove the background on .modal-background with display: none or the data-background=false attribute. It's crazy to think that the Bootstrap folks have decided to not fix this common issue.

Bootstrap Modal Backdrop Static. - JSFiddle, <button id="orange-button" type="button" class="btn btn-primary btn-lg" data- toggle="modal" data-target="#orange-modal" data-color="orange">. 3. I have tried [config]={backdrop: false, ignoreBackdropClick: true} so far but even if it removes the backdrop and prevents the closing, I am not allowed to interact with the forms behind the backdrop for example.

Modal backdrop does not disappear, when modal-dialog being , Bootstrap modal : Disable close on backdrop click without disabling the background controls-2. Can't disable the feature to click outside of modal and close. 3.

Custom Bootstrap modal backdrops, Tip: Plugins can be included individually (using Bootstrap's individual "modal.js" file), or all at once (using "bootstrap.js" or "bootstrap.min.js"). How To Create a Modal The following example shows how to create a basic modal:

Comments
  • This is the solution also for Bootstrap 3 in case you open modals using markup instead of JS methods
  • Yes, this is also true even if the modal was opened using Javascript.