Show confirm popup on clicking outside the modal - bootstrap

0
votes

I am using AngularJS (1.5.9) in my app and ui-bootstrap. I would like to show a confirm popup in case the user clicks outside the already open modal.

I tried to use the controlled exit with $uibModalInstance.close() and the non controlled exit with $uibModalInstance.dismiss() but the modal closes afterwards and once I show my confirm popup it is already too late.

Tried to use backdrop: 'static' attribute but couldn't catch a click event outside the modal window.

HTML:

<div ng-app="myApp">
    <script type="text/ng-template" id="myModal.html">
        <div class="modal-header">
            <h3 class="modal-title">Modal title</h3>
        </div>
        <div class="modal-body">
            Modal content
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" ng-click="ok()">OK</button>
            <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
        </div>
    </script>

    <div ng-controller="MyCtrl">
        <input type="button" value="Show modal" ng-click="showModal()"/>
    </div>
</div>

JS:

angular.module("myApp", ['ui.bootstrap'])
.controller("MyCtrl", function($scope, $modal) {
    $scope.showModal = function(){
        $modal.open({
              templateUrl: 'myModal.html',
              controller: 'ModalDialogController', 
         })
        .result.then(
            function () {
                alert("OK");
            }, 
            function () {
                alert("Cancel");
            }
        );
    }
})

.controller("ModalDialogController", function ($scope, $modalInstance) {
  $scope.ok = function () {
    $modalInstance.close();
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('Cancel');
  };
});

Here is a related fiddle --> Fiddle

As you can see, once opening the modal and clicking outside, there is an alert with 'cancel' but I would like to pop another modal to confirm this action to close the modal and in case the user clicks 'cancel' the previous modal stays open. in case the user clicks 'ok' close both modals.

Any ideas?

3
javascriptangularjsangular-ui-bootstrap

3 Answers

2
votes

Please try following demo:

Had used "modal.closing": This event is broadcast to the modal scope before the modal closes. If the listener calls preventDefault() on the event, then the modal will remain open. Also, the $close and $dismiss methods returns true if the event was executed. This event also includes a parameter for the result/reason and a boolean that indicates whether the modal is being closed (true) or dismissed.

You can replace javascript confirmation with confirmation modal popup.

angular.module('app', ['ui.bootstrap'])

.controller('modalCtrl', function ($scope, $uibModalInstance) {

    $scope.$on('modal.closing', function (event, reason, closed) {
        if (!closed) {

            if (!confirm('Are you sure you wanna close the modal? the database?')) {
                event.preventDefault();
            }
        }
    });

    $scope.ok = function () {
        $uibModalInstance.close();
    };

    $scope.cancel = function () {
        $uibModalInstance.dismiss('cancel');
    };
})


.controller('appCtrl', function ($scope, $uibModal) {

    $scope.open = function () {
        var modalInstance = $uibModal.open({
            templateUrl: 'myModal.html',
            controller: 'modalCtrl'
        }).result.then(
                function () {
                    alert("OK");
                },
                function () {
                    alert("Cancel");
                }
            );

    }
});
<!DOCTYPE html>
<html>

  <head>
    
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.3.2/ui-bootstrap-tpls.min.js"></script>
    
    <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
  </head>

  <body ng-app="app" ng-controller="appCtrl">
    <button ng-click="open()">Click me!</button>
     <script type="text/ng-template" id="myModal.html">
        <div class="modal-header">
            <h3 class="modal-title">Modal title</h3>
        </div>
        <div class="modal-body">
            Modal content
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" ng-click="ok()">OK</button>
            <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
        </div>
    </script>
  </body>

</html>
0
votes
Please use backdrop: 'static' after controller: 'ModalDialogController'. I am damn sure this code will be working


angular.module("myApp", ['ui.bootstrap'])
.controller("MyCtrl", function($scope, $modal) {
    $scope.showModal = function(){
        $modal.open({
              templateUrl: 'myModal.html',
              controller: 'ModalDialogController', 
              backdrop: 'static'

         })
        .result.then(
            function () {
                alert("OK");
            }, 
            function () {
                alert("Cancel");
            }
        );
    }
})

.controller("ModalDialogController", function ($scope, $modalInstance) {
  $scope.ok = function () {
    $modalInstance.close();
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
});
0
votes
    angular.module("myApp", ['ui.bootstrap'])
   .controller("MyCtrl", function($scope, $modal) {
    $scope.showModal = function(){
        $modal.open({
              templateUrl: 'myModal.html',
              controller: 'ModalDialogController', 
         })
        .result.then(
            function () {
                alert("OK");
            }, 
            function () {
                var con=confirm("Are you sure?");
                if(con)
                alert("Confirm");
                else
                alert("Cancelled");
            }
        );
    }
})