如何使ngx-bootstrap模态居中

Question

尝试使用像这样的CSS 中心这个ngx-boostrap模态,但它不起作用:

.modal.fade.in{
  display: flex;
  justify-content: center;
  align-items: center;
}

但是在开发工具中,我可以像这样添加CSS:

.modal.dialog{
  top: 50%
}

所以至少它是垂直居中的,但这是在开发工具中,并且html模板中没有.modal.dialog类

有没有办法正确居中ngx-bootstrap模式？

我想通过提供输入消息并添加是/否对话框并输出用户选择(使用EventEmitter)来创建一个通用模态组件以在任何地方使用它

我在以下Plunker中找到了一个示例,但无法在单独的自定义组件中重现它.

plunker示例来自这个网站:https://github.com/valor-software/ngx-bootstrap/issues/2334

更新:

在@Wira Xie回答之后,当我使用静态模态和这个CSS时:

.modal-sm
{
  top: 50%;
  left: 50%;
  width:30em;
  height:18em;
  background-color: rgba(0,0,0,0.5); 
}

模态显示居中,但只有Esc key可以隐藏它,所以当我点击模态外,它仍然可见.

Answer 1

为什么不使用bootstrap modal-dialog-centered类：

this.modalRef2 = this.modalService.show(ModalContentComponent,
     {
       class: 'modal-dialog-centered', initialState 
     }
);

Answer 2

尝试将此属性添加到CSS:vertical-align: middle到您的.modal.dialog班级

用于模态的弹药

.modal.fade {
    display: flex !important;
    justify-content: center;
    align-items: center;
}
.modal-dialog {
    vertical-align:middle;
    height:18em;
    background-color: rgba(0,0,0,0.5); 
}

Answer 3

在.ts文件中，您具有这样的代码（以打开模式弹出窗口）...

private showModal(template: TemplateRef<any>): BsModalRef {
    return this.modalService.show(template, {class: 'modal-lg modal-dialog-centered', ignoreBackdropClick: true, keyboard: false});
  }

您可以看到我已将modal-dialog-centered添加到该类中。完成此操作后，您还可以在CSS中修改以modal-dialog为中心的类。

Answer 4

您需要使用bootstrap类。

将模态添加.modal-dialog-centered到.modal-dialog垂直居中。

import { Component, OnInit, TemplateRef } from '@angular/core';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';

@Component({
...
})
export class ModalComponent {
  modalRef: BsModalRef;

  // Here we add another class to our (.modal.dialog)
  // and we need to pass this config when open our modal
  config = {
    class: 'modal-dialog-centered'
  }

  constructor(private modalService: BsModalService) { }

  openModal(template: TemplateRef<any>) {
    // pass the config as second param
    this.modalRef = this.modalService.show(template, this.config);
  }
}