Bootstrap modal Hintergrund Ausgabe

Question

Nachdem die Seite nach unten scrollen, wenn ich auf die Schaltfläche klicken, öffnet den modalen am oberen Rand der Seite und modal die gesamte Seite nicht abdeckt.

Hier ist meine Richtlinie

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

Es sieht aus wie CSS-Problem - Sie müssen sicherstellen, dass Ihr modales Dialogfeld Overlay hat "Position: behoben;" setze es in dein CSS Stylesheet. Es sollte mehr oder weniger so aussehen, sobald Sie es überprüfen:

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