Question

我正在使用bootstrap弹出窗口。我在jsp中使用以下代码。

JSP： - JSP依赖是

<script src="js/commons/ui-bootstrap-tpls-2.4.0.js"></script>

</style>   
     <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3 class="modal-title" id="modal-title">{{ctrl.modalHeader}}</h3>
        </div>
        <div class="modal-body" id="modal-body">
            {{ctrl.modalBody}}

        <ul ng-repeat="item in ctrl.list">
        <li ng-repeat="(key,value) in item">{{value}}</li>
        </ul>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" type="button" ng-click="ctrl.ok()">OK</button>
            <!--<button class="btn btn-warning" type="button" ng-click="ctrl.cancel()"><spring:message code="label.close"/></button>-->
        </div>
    </script>

在Jscontroller.For中添加以下代码，用于打开和关闭函数。

jsController： -

$scope.open = function() {
        var modalInstance = $uibModal.open({
            ariaLabelledBy: 'modal-title',
            ariaDescribedBy: 'modal-body',
            templateUrl: 'myModalContent.html',
            controller: function($uibModalInstance) {

                var self = this;
                self.modalHeader = modalHeader;
                self.modalBody = modalBody;
                self.list = exceptions;

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

                self.cancel = function() {
                    $uibModalInstance.dismiss('cancel');
                };
            },
            controllerAs: 'ctrl'
        });
    }

我将调用下面的函数。

$scope.open();

最后我想找出Popup是否已经打开。如果已经打开，我想关闭现有的弹出窗口，我想打开新的弹出窗口。我已经用$scope.open();打开弹出窗口。我想找到如何关闭弹出窗口。

如何关闭现有的已打开弹出窗口。

Answer 1

检查弹出元素的类名。如果弹出窗口已经打开，则表示新类将添加到弹出窗口元素（元素）中。因此，您可以通过检查该类是否添加到元素来检查。

Answer 2

（$（“element”）。data（'bs.modal'）|| {}）。isShown

当模态尚未打开时，.data（'bs.modal'）返回undefined，因此|| {} - 这将使isShown（falsy）值未定义。如果你是严格的，可以做（$（“元素”）。data（'bs.modal'）|| {isShown：false}）。isShown

Answer 3

app.service('ModalService', function($uibModal) {
var isOpen = false,

this.isOpenPopup = function () {
   return isOpen;
};

this.open = function() {

    var modalInstance = $uibModal.open({
        ariaLabelledBy: 'modal-title',
        ariaDescribedBy: 'modal-body',
        templateUrl: 'myModalContent.html',
        controller: function($uibModalInstance) {

            var self = this;
            self.modalHeader = modalHeader;
            self.modalBody = modalBody;
            self.list = exceptions;

            self.ok = function() {
                $uibModalInstance.close();
                // set isOpen false for close popup 
                isOpen=false;
            };

            self.cancel = function() {
                $uibModalInstance.dismiss('cancel');
                // set isOpen false for close popup 
                isOpen=false;

            };
        },
        controllerAs: 'ctrl'
    });

    //set isOpen flag here
    isOpen=true;
}

};

Answer 4

我认为这会帮助你弹出窗口

$(".modal").modal("hide");  // close the active popup

$('body').on('hidden.bs.modal', '.modal', function () {
    // the function trigger when the popup is closed
}

如何关闭已打开的弹出窗口

4 个答案: