angular js: Prevent Bootstrap Modal from disappearing when clicking outside or pressing escape?

Question

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/

enter image description here

CD.. · Accepted Answer · 2014-01-16T08:41:29.607

132

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

edited Jan 16 '14 at 08:41

answered Jan 16 '14 at 08:36

CD..

72,281
25
154
163

1

Works without a doubt as the answer below confirms – Jay Jay Jay May 21 '15 at 22:43

score 46 · Answer 2 · edited Jun 20 '20 at 09:12

46

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.

edited Jun 20 '20 at 09:12

Community

1
1

answered Aug 05 '15 at 09:09

theDmi

17,546
6
71
138

6

This should be the accepted answer as it resolves both of the requirements as outlined by the OP. – boardlemur Mar 21 '16 at 15:10
As said, the best and more broad answer – Almog Cohen Apr 25 '19 at 18:01

Th3Alchemist · Answer 3 · 2014-01-16T08:48:19.743

10

"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>

edited Jan 16 '14 at 08:48

answered Jan 16 '14 at 08:39

Th3Alchemist

1,161
2
13
25

angular js: Prevent Bootstrap Modal from disappearing when clicking outside or pressing escape?

3 Answers3