CODEWITHSUNDEEP
angularjsbootstrap-modalangular-ui
Kavipriya
Kavipriya

Reputation: 441

backdrop: 'static' is not working for ngDialog modal

I want to prevent the modal from closing when clicked outside or pressing esc in keyboard. So I used backdrop:'static' and keyboard:false like below,

    var app = angular.module('MyApp', ['ngDialog', 'chatSocket']);

    app.controller('MainCtrl', function ($scope, ngDialog) {
    $scope.openChatBox = function() {
      ngDialog.openConfirm({
        template: 'chatBox.html',
        controller: 'msgController',
        backdrop: 'static',
        keyboard: false,
        scope: $scope //Pass the scope object if you need to access in the template
    }).then(
        function(value) {
            //You need to implement the saveForm() method which should return a promise object
            $scope.closeChat().then(

            );
        },
        function(value) {
            //Cancel or do nothing
        }
    );
};

});

The button clicked to open the modal is,

 <button ng-click="openChatBox()" >Open</button>

What is the problem with my code, why is not working?

Upvotes: 1

Views: 2425

Answers (4)

Sreeraj
Sreeraj

Reputation: 21

Use closeByDocument: false, instead of backdrop to prevent the page from closing on background click.

    template: 'chatBox.html',
    controller: 'msgController',
    closeByDocument: false,
    keyboard: false,

Upvotes: 1

Kavipriya
Kavipriya

Reputation: 441

For $modal, we use backdrop and keyboard options to achieve it, but for ngDialog the options are closeByDocument and closeByEscape.

$scope.openChatBox = function() {
    ngDialog.openConfirm({
        template: 'chatBox.html',
        controller: 'msgController',
        closeByDocument: false,
        closeByEscape: false,
        scope: $scope //Pass the scope object if you need to access in the template
    }).then(
        function(value) {
            //You need to implement the saveForm() method which should return a promise object
            $scope.closeChat().then(

            );
        },
        function(value) {
            //Cancel or do nothing
        }
    );
};

Upvotes: 2

DilumN
DilumN

Reputation: 2895

Seems like ngDialog doesn't support backdrop static. So it's better to use $model.open

$scope.openChatBox = function() {
    var modalInstance = $modal.open({
                    template: 'chatBox.html',
                    controller: 'msgController',
                    backdrop: 'static',
                    keyboard: false,
                    scope: $scope
                });
                modalInstance.result.then(function () {
                    function(value) {
                       // do something
                   },
                   function(value) {
                      //Cancel or do nothing
                   }
                });
}

Upvotes: 0

Mistalis
Mistalis

Reputation: 18279

You should use backdrop: 'static' on your modal while open it while $uibModal.open():

$uibModal.open({
    template: 'chatBox.html',
    controller: 'msgController',
    backdrop: 'static', // <--
    ...
});

Have a look to AngularUI modal docs.

Upvotes: 0

Related Questions