web-dev-qa-db-fra.com

Angularjs ui bootstrap: comment centrer verticalement le composant modal?

Récemment, j'apprends angularjs. J'ai utilisé bootstrap auparavant. Avec jquery, je peux facilement changer la position de la position du composant modal pour l'aligner verticalement. Maintenant avec angularjs, il ne semble pas très facile de le faire. Voici un lien plongeur de ui bootstrap modal, Quelqu'un sait-il comment l'aligner verticalement?

i bootstrap composant modal

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. exemple.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');
        };
    });
angularjsangular-ui-bootstrapbootstrap-modal
11
ahwyX100

Si je comprends bien votre problème, vous pouvez réaliser l'alignement central vertical en utilisant simplement CSS. Ajoutez le 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 installé un Plunker issu du vôtre pour faire une démonstration.

Vous pouvez trouver les liens suivants

  1. Centre de position verticale modale Bootstrap
  2. Codepen Emaple

J'espère que cela t'aides. À votre santé !!

23
arifin4web

Les solutions ci-dessus s'appliqueront à tous les modaux. Si vous souhaitez appliquer à des modaux sélectifs, suivez la solution ci-dessous.

Le CSS utilise .class-a.class-b et .class-a .class-b sélecteur et besoin de 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"
});
2
Xyroid

Vous pouvez utiliser la propriété windowTopClass dans l'argument objet de la méthode open.

https://angular-ui.github.io/bootstrap/

$uibModal.open({
  ...
  ...
  windowTopClass: "modal-center-override"
});

avec le remplacement de classe CSS respectif

.modal-center-override {
  top: 50% !important;
  transform: translateY(-50%) !important;
  -webkit-transform: translateY(-50%) !important;
  -moz-transform: translateY(-50%) !important;
  -o-transform: translateY(-50%) !important;  
}
1
Nandu Kalidindi