Change backdrop to static for open bootstrap modal

10
votes

Can I change backdrop to 'static' while my modal is open?

I have modal with form submit button. When I click this button I show loading spinner on my modal and that is the moment when I want to change backdrop to static

I tried $('#myModal').modal({backdrop: 'static', keyboard: false}), but I can still close my modal by clicking the backdrop or using escape button.

Second step should be changing backdrop back to true, but I didn't try this yet, because first I need to set backdrop to static.

I could set backdrop to static on modal show, but I want to avoid this and change it after submit.

Any ideas?

6
javascriptjquerytwitter-bootstrapbootstrap-modal
Maybe I don't understand your use-case, but why don't you initialize the modal with background: static and keyboard: false? Why do you need to change it while it's open? - WillardSolutions
Because all of my other modals could be closed with escape button or clicking outside the modal. I don't want to have only one modal that user can't close like others and I shouldn't change all other modals. This is special case. On submit I show spinner on modal and I want to disable closing modal while spinner is active. - Exik
This is a valid use case. Open the modal and allow to be closed but once a certain action is started prevent the modal from closing until that action is complete. - Drew

6 Answers

7
votes

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.

3
votes

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;
3
votes

I had a different JavaScript object returned and thus the following solution:

$myModal.data("bs.modal")._config.backdrop = value;
1
votes

The simplest method I've come up with is attaching to the hide.bs.modal event and calling preventDefault(). This doesn't technically set the backdrop to static, but it achieves the same effect in a toggleable manner.

let $myModal = $('#myModal');

function preventHide(e) {
    e.preventDefault();
}

// if you have buttons that are allowed to close the modal
$myModal.find('[data-dismiss="modal"]').click(() => 
    $myModal.off('hide.bs.modal', preventHide));

function disableModalHide() {
    $myModal.on('hide.bs.modal', preventHide);
}

function enableModalHide() {
    $myModal.off('hide.bs.modal', preventHide);
}

(Disclaimer, I didn't test making buttons allowed to hide the modal, as that wasn't my scenario. If it doesn't work, just call .modal('hide') from the click() callback.)

1
votes

You can disallow closing of a modal when clicking outside of it, as well as on esc button. For example, if your modal ID is signUp:

jQuery('#signUp').on('shown.bs.modal', function() {
    jQuery(this).data('bs.modal').options.backdrop = 'static';
    jQuery(this).data('bs.modal').options.keyboard = false;
});
0
votes

I found, that in Bootstrap 5 this is slightly different:

modal = new bootstrap.Modal($('.modal'));
modal._config.backdrop = 'static'; // or true