CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapbootstrap-modal
James A
James A

Reputation: 487

Change Bootstrap modal backdrop settings while open

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.

Upvotes: 9

Views: 6185

Answers (5)

David Passmore
David Passmore

Reputation: 6099

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

Upvotes: 10

Nishad K Ahamed
Nishad K Ahamed

Reputation: 1394

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

Upvotes: 1

Eliezer Wohl
Eliezer Wohl

Reputation: 607

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.

Upvotes: 0

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

Try changing modal's option as below:

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

Here's the working example

Upvotes: 11

bwobst
bwobst

Reputation: 351

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.

Upvotes: 0

Related Questions