如何使用ng-modal垂直居中模态对话框

时间:2018-01-24 15:38:59

标签: ng-bootstrap ng-modal

是否有可能以某种方式指定以模态对话为中心的类?外部元素有一个windowClass选项,但是我没有看到在内部元素上指定以模态对话为中心的方法。

1 个答案:

答案 0 :(得分:0)

我刚开始使用Angular而且我知道它违背了它的原则,但我发现实现居中的唯一方法是在HTML模板中指定开启函数,如下所示:

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