Bootstrap ui Angularjs: come componente centrale verticale?

Recentemente sto imparando angularjs. Ho usato bootstrap prima. Con jquery, posso facilmente cambiare la posizione della posizione del componente modale per renderla allineata in verticale. Ora con angularjs, non sembra molto facile farlo. Ecco un link plunker di ui bootstrap modal, Qualcuno sa come renderlo allineato in verticale?Bootstrap ui Angularjs: come componente centrale verticale?

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

fonte

2016-02-29 ahwyX100

Se ho ben capito il problema in modo corretto, è possibile acheive l'allineamento centrale verticale semplicemente utilizzando CSS. Aggiungere seguente 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; 
}

Ho installato un Plunker biforcuta dalla tua per fare una dimostrazione.

si trovano seguenti link utili

Spero che questo aiuti. Saluti !!

fonte

2016-02-29 06:46:03 arifin4web

Grazie, questo risolve il mio problema, non ho pensato che potesse essere risolto in puro css. – ahwyX100

Le soluzioni di cui sopra si applicano a tutte le modali. Se si desidera applicare a modali selettive, seguire la soluzione indicata di seguito.

Il CSS utilizza il selettore .class-a.class-b e .class-a .class-b e deve impostare l'opzione windowClass.

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

fonte

2018-02-28 08:39:35 Xyroid

Bootstrap ui Angularjs: come componente centrale verticale?

risposta

Problemi correlati