Angularjs ui bootstrap: Wie wird die modale Komponente vertikal zentriert?

Kürzlich lerne ich angularjs. Ich habe vorher Bootstrap benutzt. Mit jQuery kann ich die Position der modalen Komponentenposition leicht ändern, um sie vertikal ausrichten zu lassen. Mit angularjs scheint das nicht so einfach zu sein. Hier ist ein Plunker Link von UI Bootstrap Modal, weiß jemand, wie man es vertikal ausrichten?Angularjs ui bootstrap: Wie wird die modale Komponente vertikal zentriert?

ui bootstrap modal component

1.index.html

<!doctype html> 
    <html ng-app="ui.bootstrap.demo"> 
    <head> 
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script> 
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script> 
     <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.1.js"></script> 
     <script src="example.js"></script> 
     <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
    </head> 
    <body> 
     <div ng-controller="ModalDemoCtrl"> 
      <script type="text/ng-template" id="myModalContent.html"> 
       <div class="modal-header"> 
        <h3 class="modal-title">I'm a modal!</h3> 
       </div> 
       <div class="modal-body"> 
        This is modal body 
       </div> 
       <div class="modal-footer"> 
        <button class="btn btn-primary" type="button" ng-click="ok()">OK</button> 
        <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button> 
       </div> 
      </script> 
      <button type="button" class="btn btn-default" ng-click="open()">Open me!</button> 
     </div> 
    </body> 
</html>

2.example.js

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']); 
    angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function($scope, $uibModal, $log) { 

     $scope.items = ['item1', 'item2', 'item3']; 

     $scope.animationsEnabled = true; 

     $scope.open = function(size) { 

      var modalInstance = $uibModal.open({ 
       animation: $scope.animationsEnabled, 
       templateUrl: 'myModalContent.html', 
       controller: 'ModalInstanceCtrl', 
       size: size, 
       resolve: { 
        items: function() { 
         return $scope.items; 
        } 
       } 
      }); 
     }; 
    }); 

    angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function($scope, $uibModalInstance, items) { 
     $scope.ok = function() { 
      $uibModalInstance.close($scope.selected.item); 
     }; 

     $scope.cancel = function() { 
      $uibModalInstance.dismiss('cancel'); 
     }; 
    });

Quelle

2016-02-29 ahwyX100

Wenn ich Ihr Problem richtig verstanden habe, können Sie die vertikale zentrierte Ausrichtung acheive nur durch den Einsatz CSS. Fügen Sie folgende CSS:

.modal { 
    text-align: center; 
    padding: 0!important; 
} 

.modal::before { 
    content: ''; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
    margin-right: -4px; 
} 

.modal-dialog { 
    display: inline-block; 
    text-align: left; 
    vertical-align: middle; 
}

Ich habe Setup ein Plunker von Ihnen gegabelt, um eine Demonstration zu machen.

können Sie folgenden Links Hilfreiche

Hoffnung, das hilft. Prost !!

Quelle

2016-02-29 06:46:03 arifin4web

Danke, das löst mein Problem, ich habe nicht gedacht, es könnte in reinem CSS gelöst werden. – ahwyX100

Die obigen Lösungen gelten für alle Modalitäten. Wenn Sie auf selektive Modale anwenden möchten, folgen Sie der unten angegebenen Lösung.

Das CSS verwendet .class-a.class-b und .class-a .class-b Selektor und muss Option windowClass festlegen.

.center-modal.modal { 
    text-align: center; 
} 

@media screen and (min-width: 768px) { 
    .center-modal.modal:before { 
    display: inline-block; 
    vertical-align: middle; 
    content: " "; 
    height: 100%; 
    } 
} 

.center-modal .modal-dialog { 
    display: inline-block; 
    text-align: left; 
    vertical-align: middle; 
} 

var modalInstance = $uibModal.open({ 
    templateUrl: 'modules/users/client/views/authentication/login.client.view.html', 
    windowClass: "center-modal" 
});

Quelle

2018-02-28 08:39:35 Xyroid

Angularjs ui bootstrap: Wie wird die modale Komponente vertikal zentriert?

Antwort

Verwandte Themen