web-dev-qa-db-fra.com

Centre Angular interface modale

Je joue avec le dialogue modal angulaire ui. Je me demande quel est le moyen de le centrer? Je trouve une question similaire: Twitter Bootstrap - Dialog Modal Center

mais était incapable de le faire fonctionner car je suis plutôt nouveau à angular. Voici une version simplifiée du pilote pour le dialogue modal à partir de la page des composants d'interface utilisateur angulaire:

http://plnkr.co/edit/M35rpChHYThHLK17g9zU?p=preview

<script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3>I'm a modal!</h3>
        </div>
        <div class="modal-body">
            test
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" ng-click="ok()">OK</button>
            <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
        </div>
    </script>

    <button class="btn btn-default" ng-click="open()">Open me!</button>

js:

angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal) {

  $scope.open = function () {

    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: ModalInstanceCtrl
    });

  };
};


var ModalInstanceCtrl = function ($scope, $modalInstance) {

  $scope.ok = function () {
    $modalInstance.close("ok");
  };

  $scope.cancel = function () {
    $modalInstance.dismiss("cancel");
  };
};

Mon idée est de prendre les dimensions de la page de manière dynamique lorsque le modal est ouvert, de le redimensionner et de le centrer, mais je ne suis pas sûr de savoir comment je peux le faire car je suis plutôt nouveau dans angularjs. Toute aide avec exemple de travail sera grandement appréciée.

angularjsangular-ui-bootstrap
13
Mdb

Vous pouvez spécifier la classe de style pour la fenêtre modale en utilisant l'attribut windowClass lors de la création de modalInstance.

var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      windowClass: 'center-modal'
    });

puis dans votre css vous pouvez spécifier la définition de .center-modal comme,

.center-modal {
    position: fixed;
    top: 10%;
    left: 18.5%;
    z-index: 1050;
    width: 80%;
    height: 80%;
    margin-left: -10%;
}

ou spécifiez quoi que ce soit en fonction de vos besoins

28
M22an

Cette approche fonctionne avec n'importe quelle taille modale.

.modal {
  text-align: center;
}

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

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

La réponse originale a un exemple avec Plunker.

0
robsonrosa