Angularjs ui bootstrap: comment la verticale du centre de modal composant?

Récemment je suis en train d'apprendre angularjs. J'ai utilisé bootstrap avant. Avec jquery, je peux facilement changer la position de la composante modale mesure de la mettre à la verticale aligner. Maintenant, avec angularjs, il ne semble pas très facile à faire. Voici une plunker lien de l'interface utilisateur, bootstrap modal, personne Ne sait comment la rendre vertical align?

ui bootstrap modal composant

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

OriginalL'auteur ahwyX100 | 2016-02-29

  1. 21

    Si je comprends votre problème correctement, vous pouvez réaliser à la verticale du centre de l'alignement en utilisant CSS. Ajouter le code CSS suivant: 

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

    J'ai mis un Plunker fourche de la vôtre pour faire une démonstration.

    Vous pouvez trouver en suivant les liens Utiles

    1. Bootstrap 3 modale de la position verticale du centre de
    2. Codepen Emaple

    Espère que cette aide. Cheers !!

    Merci, cela résout mon problème, je n'ai pas pensé qu'il pourrait être résolu en pur css.

    OriginalL'auteur arifin4web

  2. 1

    Les solutions ci-dessus s'appliquent à tous les auxiliaires modaux. Si vous souhaitez appliquer sélective des modaux puis suivre la solution donnée ci-dessous.

    Le CSS utilise .class-a.class-b et .class-a .class-b sélecteur et devez définir l'option 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"
});

    OriginalL'auteur Xyroid