angular js: Prevent Bootstrap Modal from disappearing when clicking outside or pressing escape?
Solution 1
Use:
backdrop: 'static'
backdrop
- controls presence of a backdrop. Allowed values: true (default), false (no backdrop), 'static' - backdrop is present but modal window is not closed when clicking outside of the modal window.
For example:
$modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
backdrop: 'static'
})
Solution 2
Add both backdrop: static
and keyboard: false
to your modal options. The first one disables the background click, the second one the escape key.
backdrop: 'static'
- backdrop is present but modal window is not closed when clicking outside of the modal window.
keyboard
- indicates whether the dialog should be closable by hitting the ESC key, defaults to true.
Example:
$modal.open({
templateUrl: 'template.html',
controller: TheController,
backdrop: 'static',
keyboard: false
})
See the docs for more information.
Solution 3
"backdrop - controls presence of a backdrop. Allowed values: true (default), false (no backdrop), 'static' - backdrop is present but modal window is not closed when clicking outside of the modal window." - in http://angular-ui.github.io/bootstrap/#/modal
Try:
<div ng-controller="ModalDemoCtrl" data-backdrop="static">
...
</div>
![Vinodh](https://i.stack.imgur.com/9rVhj.jpg?s=256&g=1)
Vinodh
It's not who i am, doing what other's think. But what i do, Representing me
Updated on July 05, 2022Comments
-
Vinodh about 2 years
Am using the angular bootstrap to present a modal. But my requirement is to prevent pop-up dismissal when clicking outside the modal, or when the escape key is pressed.
I followed the tutorial on the angular bootstrap site :http://angular-ui.github.io/bootstrap/
-
Jay Jay Jay about 9 yearsWorks without a doubt as the answer below confirms
-
boardlemur over 8 yearsThis should be the accepted answer as it resolves both of the requirements as outlined by the OP.
-
Almog Cohen about 5 yearsAs said, the best and more broad answer