Change Bootstrap modal backdrop settings while open

Question

I'm trying to change the backdrop setting of my modal to 'static' as a response to an event, so that it becomes non-dismissable. I tried this by setting $('#myModal').modal({ backdrop: 'static',keyboard:false }) after clicking on a button inside the modal, with no luck.

The effect I want is similar to the effect from nakupanda's bootstrap-dialog (see Manipulating Buttons section, when dialog.setClosable(true); is triggered on click of the 'Click to disable and spin' button, the modal is no longer closable)

Please see this jsfiddle.

I know this question has already been asked here but it doesn't have a proper answer. I know this is possible somehow, but I fail to analyze nakupanda's code.

Answer 1

Try changing modal's option as below:

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

Here's the working example

Answer 2

For anyone attempting to do this on v4, you need to change:

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

to

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

Answer 3

why don't you just initialize the modal with options at page load instead of on button click?

just define a document ready fn and put the below code in it.

$('#myModal').modal({
    backdrop: 'static',
    keyboard: false
  })

Answer 4

You could try something like this: http://codepen.io/bwobst/pen/GrKBKy?editors=1010

$('#open-modal').click(function(evt) {
  $('#myModal').modal({backdrop: 'static'});
  $('.modal button').prop('disabled', true);
});

When you click the 'open modal' button it sets the backdrop to static and disables the buttons within the modal.

Answer 5

I came up with a solution. The issue is that even if you set the backdrop to static, there is still a click listener.

My solution is here. https://jsfiddle.net/25zbf094/2/

JavaScript

$('#makeIndismissable').click(function(){
  $('#myModal').prop('onclick',null).off('click');
});

$('#close').click(function(){
    $('#myModal').modal("hide")
})

I kept the HTML mostly unchanged, but added the id of "close" to the close button. And as you can see above, you can still close the modal by pressing the X in the top right.