Bootstrap $modal window 背景清除屏幕中的元素

Question

我的应用程序出现问题，我真的不知道如何将其复制为简化版本，所以我问这个问题，以防有人知道可能会发生什么。

我有一个 SPA，它在导航过程中加载不同的视图。在其中一个视图中，我单击屏幕中的一个元素，这将打开一个模态 window。我正在使用 bootstrap $modal 来执行此操作。问题是，当模态 window 出现时，视图中的其他所有内容都消失了。只有 SPA 中视图外的元素保留。

有什么想法吗？我在控制台中没有收到任何错误。我猜它与 angular 中的处理有关，也许模态 window 在视图之前处理并在显示 window 时停止？另外，如果我按下屏幕关闭 window，一切都会恢复。

编辑：我可以提供一个 plunker 效果很好，因为模态 window 下的图像不会消失，所以恐怕不是很有用。

angular.module('app', ['ngRoute', 'myApp'])

.config(['$routeProvider', 
    function($routeProvider) {
        $routeProvider.
            when('/index', {
                template: '<my-dir></my-dir>',
                controller: 'myCtrl'
            }).
          otherwise({
                template: '<my-dir></my-dir>',
                controller: 'myCtrl'
          });
}]);

angular.module('myApp', ['ui.bootstrap'])

.controller('myCtrl', ['$scope', function($scope) {

  $scope.actions = [
    {'x':50,'y':40,'time':'02:00','period':'1','name':'name1'},
    {'x':50,'y':60,'time':'02:00','period':'2','name':'name2'},
    {'x':50,'y':80,'time':'02:00','period':'3','name':'name3'}
  ]

}])

.directive("myDir", ['$compile', '$modal', function($compile, $modal){
  return {
    restrict: 'E',
    scope: true,
    replace: true,
    link: function (scope, element, iAttrs) { 

      for (var i = 0; i < scope.actions.length; i++) {
        var circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
            circle.setAttribute('cx', scope.actions[i].x);
            circle.setAttribute('cy', scope.actions[i].y);
            circle.setAttribute('r', 5);            
        circle.setAttribute('ng-click', 'open(' + i + ')');
        element.append(circle);
      }
      $compile(element)(scope);
    },
    controller: function($scope) {              
          $scope.open = function (idx) {                    
            var modalInstance = $modal.open({
          windowClass: 'center-modal',
          templateUrl: 'modalWindow.html',
          controller: 'myDirCtrl',
          resolve: {
                      action: function() {
                        return $scope.actions[idx];
                      }
          }
        });
        };              
        },
    template:'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400"><image x="0" y="0" width="400" height="200" xlink:href="http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png"/></svg>'
  }
}])

.controller('myDirCtrl', function($scope, $modalInstance, action) {
        $scope.action = action;
});

Answer 1

你能提供一些你如何使用 $modal 的代码吗？

我建议使用 Angular-UI 作为 Bootstrap 实现。
https://angular-ui.github.io/bootstrap/

他们在 Angular 世界中工作得更好。

希望对您有所帮助！

编辑：

尝试像这样定义你的模态：

$scope.openmodal = function () {

var modalInstance = $modal.open({
templateUrl :"./Pathtoexternalmodalhere",
controller :"yourcontroller"
})
};

至少这适用于我的应用程序！

Answer 2

好的，我终于找到问题了

我发现这个问题的发生是因为我的应用程序中有一个 .css 文件。我已经为我的 body 定义了一个高度，显然当模式 window 打开时，元素是在 body 内创建的，并用 overflow: hidden.[= 标记其他所有内容11=]

我删除了 html body 中的高度，一切都恢复了。

Bootstrap $modal window 背景清除屏幕中的元素

Bootstrap $modal window backdrop clears elements in the screen

angularjs

bootstrap-modal