如何使用 ng-modal 垂直居中模式对话框答案

【问题标题】：How to vertically center modal dialog using ng-modal如何使用 ng-modal 垂直居中模式对话框
【发布时间】：2018-01-24 15:38:58
【问题描述】：

是否可以以某种方式指定以模式对话框为中心的类？外部元素有一个 windowClass 选项，但我没有看到一种方法可以在内部元素上指定 modal-dialog-centered。

【问题讨论】：

标签： ng-bootstrap ng-modal

【解决方案1】：

我刚开始使用 Angular，我知道它违反了它的原则，但我发现实现居中的唯一方法是在 HTML 模板中指定 opener 函数，如下所示：

    <button (click)="openModal(myModalTemplateId)" btn btn-secondary">

并像这样在组件内部定义这个讨厌的函数：

    openModal(content) {
      let x = this.modalService.open(content);
      // change the padding value for your case or use some other styling
      x._windowCmptRef._component._elRef.nativeElement.style = 'display: block; padding-top: 30%';
      // you can try to use the code bellow to set the class but it's not working for me
      // x._windowCmptRef._component._elRef.nativeElement.children[0].classList.add('modal-dialog-centered');
    }

【讨论】：