Центр Angular modal ui

Я играю с angular modal ui dialog. Интересно, каков способ сосредоточить его? Я нахожу аналогичный вопрос: Twitter Bootstrap - Центр Модальный диалог

но не смог заставить его работать, поскольку я довольно новичок в angular. Вот упрощенная версия plunker для модального диалога на странице angular ui components:

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

Моя идея - динамически отображать размеры страницы, когда модаль открыт и изменяет размер и центрирует его, но я не уверен, как это сделать, поскольку я довольно новичок в angularjs. Любая помощь с рабочим примером будет с благодарностью.

Ответ 1

Вы можете указать класс стиля для модального окна с помощью атрибута windowClass при создании modalInstance

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

то в вашем css вы можете указать определение для .center-модального типа,

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

или указать что-либо, основанное на ваших потребностях

Ответ 2

Этот подход работает с любым модальным размером.

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

В исходном ответе есть пример с Plunker.