Question

我在我的app和ui-bootstrap中使用AngularJS（1.5.9）。我想显示一个确认弹出窗口，以防用户点击已打开的模式。

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

尝试使用backdrop: 'static'属性，但无法捕捉模态窗口外的点击事件。

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

这是一个相关的小提琴 - ＆gt; Fiddle

正如您所看到的，一旦打开模态并单击外部，就会出现“取消”警报，但我想弹出另一个模式以确认此操作以关闭模式，以防用户点击“取消”以前的模态保持开放。如果用户点击'ok'，则关闭两个模态。

有什么想法吗？

Answer 1

请尝试以下演示：

已使用＆＃34; modal.closing＆＃34;：此事件在模态关闭前广播到模态范围。如果侦听器对事件调用preventDefault（），则模态将保持打开状态。此外，如果事件被执行，$ close和$ dismiss方法返回true。此事件还包括结果/原因的参数以及指示模态是关闭（true）还是关闭的布尔值。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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 3

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

单击模态外部时显示确认弹出窗口 - bootstrap

3 个答案: