How do I prevent angular-ui modal from closing?


I am using Angular UI $modal in my project

I don't want user to close the modal by pressing on backdrop. I want a modal can only be closed by pressing close button which I have created.

How do I prevent modal from closing ?

Problem courtesy of: Rahul Prasad


While you creating your modal you can specify its behavior:

   // ... other options
   backdrop  : 'static',
   keyboard  : false
Solution courtesy of: artur grzesiak


for the new version of ngDialog (0.5.6), use:

closeByEscape : false
closeByDocument : false
Discussion courtesy of: Ben Cohen

Configure globally,

decorator, one of the best features in angular. gives the ability to "patch" 3rd party modules.

Let's say you want this behavior in all of your $modal references and you don't want to change your calls,

You can write a decorator. that simply adds to options - {backdrop:'static', keyboard:false}

angular.module('ui.bootstrap').config(function ($provide) {
    $provide.decorator('$modal', function ($delegate) {
        var open = $;

        $ = function (options) {
            options = angular.extend(options || {}, {
                backdrop: 'static',
                keyboard: false

            return open(options);
        return $delegate;
  • Note: in the latest versions, the $modal renamed to $uibModal

Online demo -

Discussion courtesy of: Jossef Harush

This is what is mentioned in documentation

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.

static may work.

Discussion courtesy of: Chandermani
backdrop : 'static'

Will work for 'click' events but still you can use "Esc" key to close the popup.

keyboard :false

to prevent popup close by "Esc" key.

Thanks to pkozlowski.opensource for answer.

I think question is duplicate of Angular UI Bootstrap Modal - how to prevent user interaction

Discussion courtesy of: Sachin G.

Old question, but if you want to add confirmation dialogs on various close actions, add this to your modal instance controller:

$scope.$on('modal.closing', function(event, reason, closed) {
    console.log('modal.closing: ' + (closed ? 'close' : 'dismiss') + '(' + reason + ')');
    var message = "You are about to leave the edit view. Uncaught reason. Are you sure?";
    switch (reason){
        // clicked outside
        case "backdrop click":
            message = "Any changes will be lost, are you sure?";

        // cancel button
        case "cancel":
            message = "Any changes will be lost, are you sure?";

        // escape key
        case "escape key press":
            message = "Any changes will be lost, are you sure?";
    if (!confirm(message)) {

I have a close button on the top right of mine, which triggers the "cancel" action. Clicking on the backdrop (if enabled), triggers the cancel action. You can use that to use different messages for various close events.

Discussion courtesy of: Tiago

This recipe can be found in it's original form on Stack Over Flow.