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.
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.
Static backdropWhen backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it.
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.
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" ×
Try changing modal
's option as below:
$('#myModal').data('bs.modal').options.backdrop = 'static';
Here's the working example
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With