引導模式的背景下，問題

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;