如何關閉已經打開的彈出窗口

Question

我正在使用引導彈出窗口。 而且我在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();

最后，我想查找彈出窗口是否已打開。 如果已經打開，我想關閉現有的彈出窗口，然后打開新的彈出窗口。 我已經在使用$scope.open();打開彈出窗口了$scope.open(); 。 我想找到如何關閉彈出窗口。

如何關閉現有打開的彈出窗口。

Answer 1

您檢查彈出的元素的類名稱。 如果彈出窗口已經打開，則意味着將新類添加到彈出窗口的元素（元素）中。 因此，可以通過檢查是否在元素中添加了類來進行檢查。

Answer 2

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

當模態尚未打開時，.data（'bs.modal'）返回未定義，因此|| {}-這將使isShown（falsy）值不確定。 如果您很嚴格，可以這樣做（$（“ element”）。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
}