ブートストラップモーダルな背景の問題

Question

私はボタンをクリックすると、ページを下にスクロールした後、 それはページ上部のモーダルを開き、モーダルは、ページ全体をカバーしていません。ここで

は）私の指示

app.directive('modal', function() { 
return { 
    template: '<div class="modal fade">' + '<div class="modal-dialog modal-lg">' + '<div class="modal-content">' + '<div class="modal-header" style="background-color: #62A8EA; ">' + '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' + 
     '<h4 class="modal-title" style="color:#ffffff;">{{ title }}</h4>' + '</div>' + '<div class="modal-body" ng-transclude></div>' + '</div>' + '</div>' + '</div>', 
    restrict: 'E', 
    transclude: true, 
    replace: true, 
    scope: true, 
    link: function postLink(scope, element, attrs) { 
     scope.title = attrs.title; 
     scope.$watch(attrs.visible, function(value) { 
      if (value == true) { 
       $(element).modal('show'); 
      } else { 
       $(element).modal('hide'); 
      } 
     }); 
     $(element).on('shown.bs.modal', function() { 
      scope.$apply(function() { 
       scope.$parent[attrs.visible] = true; 
      }); 
     }); 
     $(element).on('hidden.bs.modal', function() { 
      scope.$apply(function() { 
       scope.$parent[attrs.visible] = false; 
      }); 
     }); 
    } 
}; 

}です。

Answer 1

CSSの問題のようです。モーダルダイアログのオーバーレイに「位置：固定;」があることを確認する必要があります。あなたのCSSスタイルシートでそれを設定します。 一度検査すれば多かれ少なかれ同じように見えるはずです：

position: fixed; 
top: 0; 
right: 0; 
bottom: 0; 
left: 0;