Question

我正在使用ng-bootstrap作为我的模态。我想知道什么是自定义模态窗口的html的最佳方法。

默认情况下，模态html看起来像

<div role="document" class="modal-dialog">
  <div class="modal-content">
    //template or component
  </div>
</div>

在每个模态中都有一些我想要的元素。我想将这些元素添加到ng-bootstrap生成的html中，所以我不必继续将它们写在模板中。

有一个很好的简单方法吗？

Answer 1

您可以通过windowClass添加自定义类：“ myModal”

open(content) {
this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title', size: 'sm', backdropClass: 'light-blue-backdrop', windowClass: 'dark-modal'}).result.then((result) => {
  this.closeResult = `Closed with: ${result}`;
}, (reason) => {
  this.closeResult = 'lol';
});

}

有关更多信息和选项，请参见：https://stackblitz.com/run?file=app/modal-options.ts

ng-bootstrap：如何覆盖模态窗口html

1 个答案: