在模式外单击时显示确认弹出窗口 - bootstrap

Question

我在我的应用程序中使用 AngularJS (1.5.9) 和 ui-bootstrap。我想显示一个确认弹出窗口，以防用户在已经打开的模式之外单击。

我尝试使用 $uibModalInstance.close() 的受控退出和 $uibModalInstance.dismiss() 的非受控退出，但是模式随后关闭，一旦我显示确认弹出窗口就已经太晚了。

尝试使用 backdrop: 'static' 属性但无法在模式 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');
  };
});

这里是相关的 fiddle --> Fiddle

如您所见，一旦打开模式并在外部单击，就会出现 'cancel' 的警报，但我想弹出另一个模式以确认此操作以关闭模式，以防用户点击'cancel' 之前的模式保持打开状态。如果用户单击 'ok' 关闭两个模式。

有什么想法吗？

Answer 1

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

Answer 2

    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");
            }
        );
    }
})

Answer 3

请尝试以下演示：

已使用"modal.closing"：此事件在模态关闭之前广播到模态范围。如果侦听器在事件上调用 preventDefault()，则模式将保持打开状态。此外，如果事件已执行，$close 和 $dismiss 方法 returns 为 true。此事件还包括 result/reason 的参数和指示模态是关闭 (true) 还是关闭的布尔值。

您可以用确认模式弹出窗口替换 javascript 确认。

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>

在模式外单击时显示确认弹出窗口 - bootstrap

Show confirm popup on clicking outside the modal - bootstrap

javascript

angularjs

angular-ui-bootstrap