如何更改 ng-bootstrap 中模态的位置

Question

我无法弄清楚在任何地方显示模态的方式，但默认一种，以顶部为中心，对我来说，这是显示模态的最丑陋的地方。

有人可以帮忙吗？

首先，我想在中间的某个地方展示它。

我试图更改模态组件样式表中的 css，但没有成功。 而且我不想更改所有模态的样式。

Answer 1

您可以使用打开模态函数中的配置类将自己的自定义类添加到模态对话框

  openModal(modal_id) {
     this.modalService.open(modal_id, { windowClass: 'custom-class' });
  }

以上结果产生以下 html 结构：

<div class="modal custom-class">
    <div class="modal-dialog">
          <div class="modal-content">
                ...
          </div>
    </div>
</div>

您的自定义 css 可以具有以下代码：

.custom-class {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Answer 2

另一种方法可以。 正如在引导模态文档中看到的那样，模态使用固定位置。 您可以覆盖使用 window-class 应用的默认引导程序类，并使用 css 进行定位，如您在本示例中所见

styles: [`
.dark-modal .modal-content {
  background-color: #292b2c;
  color: white;
  top:200px;
}
.dark-modal .close {
  color: white;   
}
`]

Answer 3

如果你想垂直居中，他们有一个centered选项，你可以使用：

this.modalService.open(your_modal, { centered: true })