中心角模态ui答案

【问题标题】：Center Angular modal ui中心角模态ui
【发布时间】：2014-06-03 22:10:07
【问题描述】：

我正在玩 angular modal ui 对话框。我想知道居中的方法是什么？我发现了一个类似的问题： Twitter Bootstrap - Center Modal Dialog

但由于我对 Angular 比较陌生，所以无法使其工作。这是 Angular ui 组件页面中模态对话框的 plunker 的简化版本：

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 还很陌生。任何有关工作示例的帮助将不胜感激。

【问题讨论】：

stackoverflow.com/a/25160044/900284

标签： angularjs angular-ui-bootstrap

【解决方案1】：

您可以在创建modalInstance时使用windowClass属性指定模态窗口的样式类

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

然后在您的 css 中，您可以指定 .center-modal 的定义，

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

或根据您的需要指定任何内容

【讨论】：

示例 css 确实会重新定位模态对话框，但也会通过调整对话框周围的模态包装器的大小/重新定位来打破单击外部对话框关闭行为。如stackoverflow.com/a/21312755 中所述，定位 .modal-dialog 将避免此问题。
@M22an：有没有办法在模式打开时动态更改“windowClass”？
@me_digvijay，如果你想改变样式，也许你可以尝试使用 jQuery。

【解决方案2】：

This approach 适用于任何模态尺寸。

.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 的例子。

【讨论】：