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

JavascriptAngularjsAngular UiAngular Bootstrap

Javascript Problem Overview

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

Javascript Solutions

Solution 1 - Javascript

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

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

"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>
Categories
Recommended Javascript Solutions
Recommended Angularjs Solutions
Recommended Angular Ui Solutions

Previous Solution:

Set content files to "copy local : always" in a nuget package

Visual StudioVisual Studio-2012NugetNuget PackageCopy Local

Next Solution:

Resizing a UILabel to accommodate insets

IosIphone

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionVinodhView Question on Stackoverflow
Solution 1 - JavascriptCD..View Answer on Stackoverflow
Solution 2 - JavascripttheDmiView Answer on Stackoverflow
Solution 3 - JavascriptTh3AlchemistView Answer on Stackoverflow