앵귤러 부츠 스트랩 모달이 배경을 열어 둡니다.

앵귤러 부츠 스트랩 모달이 배경을 열어 둡니다.

앵귤러를 쓰고 있습니다.모달스와 같은 내 Angular 1.4 앱에 부트스트랩 구성 요소를 통합하는 UI.

컨트롤러에서 모드를 호출하는 것은 다음과 같습니다.

var modalInstance = $modal.open({
  animation: true,
  templateUrl: '/static/templates/support-report-modal.html',
  controller: 'ModalInstanceCtrl'
});

안타깝게도 다음을 사용하여 Modal을 닫으려고 할 때:

modalInstance.close();

모드 자체가 사라지고 배경도 희미해지지만 DOM에서 제거되지 않아 페이지 전체를 덮어버려 페이지가 응답하지 않습니다.

검사할 때 다음과 같은 내용이 나타납니다.

https://angular-ui.github.io/bootstrap/ #/ modal 클래스의 Documentation에 있는 예제modal-open몸과 전체에서 제거됩니다.modal-backdrop가까이에서 DOM에서 제거됩니다.예에서 DOM에서 배경이 제거되지 않으면서 모드가 퇴색되는 이유는 무엇입니까?

부트스트랩 모달스 배경에 대한 다른 질문들을 많이 확인해보았지만 무엇이 잘못되고 있는지 알 수가 없습니다.

이것은 분명히 버그 때문입니다.각진UI는 아직 Angular 1.4를 지원하지 않습니다.http://github.com/angular-ui/bootstrap/issues/3620 이 해결되면 이렇게 하면 됩니다.

팀이 이 문제를 해결할 때까지 여기서 해결할 일이 있습니다.

<div class="modal-footer">
    <button class="btn btn-primary"
        ng-click="registerModal.ok()"
        remove-modal>OK</button>
    <button class="btn btn-warning"
        ng-click="registerModal.cancel()"
        remove-modal>Cancel</button>
</div>

/*global angular */
(function () {
'use strict';
angular.module('CorvetteClub.removemodal.directive', [])
.directive('removeModal', ['$document', function ($document) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.bind('click', function () {
                $document[0].body.classList.remove('modal-open');
                    angular.element($document[0].getElementsByClassName('modal-backdrop')).remove();
                    angular.element($document[0].getElementsByClassName('modal')).remove();
                });
            }
        };
    }]);
}());

안타깝게도 기여자에 의해 다른 스레드로 푸시되다가 다른 기여자에 의해 "비 주제"로 간주되어 다른 기여자에 의해 푸시되는 스레드가 닫혔기 때문에 이 문제에 대해 팀은 의견이 일치하지 않는 것으로 보입니다.

이렇게 간단하게 할 수 있습니다. 먼저 열려 있는 모드를 닫습니다.

 $('#nameOfModal').modal('hide');  

기본적으로 id of modal Second를 제거할 경우 제거합니다.

 $('body').removeClass('modal-open');

마지막으로 막후에서

 $('.modal-backdrop').remove();

<button type="button" class="close" onclick="$('.modal-backdrop').remove();"
                                data-dismiss="modal">

$(document).keypress(function(e) { 
    if (e.keyCode == 27) { 
       $('.modal-backdrop').remove();
    } 
});

Angular version 1.3.13을 사용하고 있는데 비슷한 문제가 있습니다.저는 이 문제를 조사하고 있었고 이 버그는 여기 https://github.com/angular-ui/bootstrap/pull/3400 에서 각도 버전 1.3.13에서 1.4.1 세부 사항까지 확장된다고 생각합니다.

그리고 그 링크의 아래쪽으로 스크롤하면 페르난도 주니어가 테스트하고 업그레이드한 버전이 여전히 동일한 문제를 보여주는 게시물을 볼 수 있습니다.그는 심지어 http://plnkr.co/edit/xQOL58HDXTuvSDsHRbra 문제를 시뮬레이션하기 위해 플링커를 만들었고, 저는 Angular-UI modal code 예제를 사용하여 아래 코드 스니펫의 문제를 시뮬레이션했습니다.

// angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);

angular
  .module('ui.bootstrap.demo', [
    'ngAnimate',
    'ui.bootstrap',
  ]);

angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $modal, $log) {

  $scope.items = ['item1', 'item2', 'item3'];

  $scope.animationsEnabled = true;

  $scope.open = function (size) {

    var modalInstance = $modal.open({
      animation: $scope.animationsEnabled,
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      size: size,
      resolve: {
        items: function () {
          return $scope.items;
        }
      }
    });

    modalInstance.result.then(function (selectedItem) {
      $scope.selected = selectedItem;
    }, function () {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };

  $scope.toggleAnimation = function () {
    $scope.animationsEnabled = !$scope.animationsEnabled;
  };

});

// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {

  $scope.items = items;
  $scope.selected = {
    item: $scope.items[0]
  };

  $scope.ok = function () {
    $modalInstance.close($scope.selected.item);
  };

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

<!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <!-- angular 1.4.1 -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.js"></script>
    <!-- angular animate 1.4.1 -->
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-animate.min.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="ModalDemoCtrl">
    <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3 class="modal-title">I'm a modal!</h3>
        </div>
        <div class="modal-body">
            <ul>
                <li ng-repeat="item in items">
                    <a ng-click="selected.item = item">{{ item }}</a>
                </li>
            </ul>
            Selected: <b>{{ selected.item }}</b>
        </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>

    <button class="btn btn-default" ng-click="open()">Open me!</button>
    <button class="btn btn-default" ng-click="open('lg')">Large modal</button>
    <button class="btn btn-default" ng-click="open('sm')">Small modal</button>
    <button class="btn btn-default" ng-click="toggleAnimation()">Toggle Animation ({{ animationsEnabled }})</button>
    <div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
  </body>
</html>

제출 버튼이나 다른 페이지로 이동하는 버튼/selection에는 data-dismiss="modal"만 있으면 백드롭을 처리할 수 있습니다.이것은 단지 당신이 선택한 모드를 무시하라는 것입니다.

Angular 1.3.0도 사용하고 있고 UI bootstrap-tpls-0.11.2도 사용하고 있는데 어떤 이유에서인지 새 페이지로 리디렉션할 때 문제가 발생하고 배경이 계속 표시되어 이 코드를 추가했습니다...

    .then(function () {
        $("#delete").on('hidden.bs.modal', function () {
            $scope.$apply();
        })
    });

제가 여기서 실제로 발견한 것은..부츠트랩 3모달 & 앵글 숨김JS 리디렉션($location.path)

언급URL : https://stackoverflow.com/questions/30191375/angular-bootstrap-modal-leaves-backdrop-open