Bootstrap模态背景问题

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问题 - 你需要确保你的模态对话框覆盖有＆＃34; position：fixed;＆＃34;在CSS样式表中设置它。 一旦你检查它，它应该看起来或多或少：

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