Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 492
James A Avatar asked Jan 02 '17 03:01

James A


People also ask

How do I stop the background when modal windows pop up?

The key idea is to have pointer-events: none; for the body when modal is open. But the specific elements you want to be interacted with should have e.g. pointer-events: auto; . In the example you can click both buttons when dialog is hidden, but only Toggle Dialog button when dialog is shown.

How do you prevent bootstrap modal from closing when clicking outside?

Static backdropWhen backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it.

How do I toggle a bootstrap modal?

To trigger the modal window, you need to use a button or a link. Then include the two data-* attributes: data-toggle="modal" opens the modal window. data-target="#myModal" points to the id of the modal.

What is backdrop in bootstrap modal?

The backdrop option specifies whether the modal should have a dark overlay (the background color of the current page) or not. Modal with Overlay (backdrop:true) Modal without Overlay (backdrop:false) Modal with backdrop:"static" ×


1 Answers

Try changing modal's option as below:

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

Here's the working example

like image 70
Guruprasad J Rao Avatar answered Sep 21 '22 09:09

Guruprasad J Rao