如果我在向下滚动页面后单击该按钮， 它会在页面顶部打开模态框，但模态框不会覆盖整个页面。

这是我的指令

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;
            });
        });
    }
};

});