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

Posted 2023-03-06

【中文标题】如何在 ng-bootstrap 中更改模态框的位置

【英文标题】：How to change the position of modals in ng-bootstrap

【发布时间】：2018-04-23 13:37:26

【问题描述】：

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

有人可以帮忙吗？

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

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

【参考方案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%);

【讨论】：

感谢您的回答。但是，我有一个错误：Property 'config' does not exist on type 'NgbModal'.

试试这个：this.modalService.open(modal-id, windowClass: 'custom-class' );我已经更新了我上面的评论

是的，它去了。它不完全在中间，位置应该是absolute，但我明白了。非常感谢！ )

【参考方案2】：

另一种方法可以。 正如在bootstrap modal 文档中所见，模态框使用的是固定位置。您可以覆盖默认引导类，该类使用窗口类应用并使用 css 定位，如您在此 example 中看到的那样@

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

.dark-modal .close 
  color: white;   

`]

【参考方案3】：

如果您想将其垂直居中，您可以使用centered 选项：

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