Question

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

有人可以帮忙吗？

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

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

Answer 1

您可以使用open模式函数

中的config类将自己的自定义类添加到模式对话框中

  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

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

中所见

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

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

3 个答案: