自定义 NgbModal 大小

Question

我正在使用 Angular 6 和 NgbModal 就像

openViewDescriptionModal(id) {
  const viewModal = this.modalService.open(ProductComponent, {size: 'lg'});
}

但这会打开宽度为 50% 的模态，两边只有 25% space 为空。

我想将模态宽度重新设计为 window 宽度的 90%。

但是 NgbModal 只允许 sm 和 lg 尺寸。

如何增加模态框的宽度或可能使用自定义 class 来增加模态框宽度？

我尝试将 xl 之类的值设置为 size，但它不起作用。我还尝试自定义模态 class 的 CSS 但这也不起作用。

Answer 1

您可以设置 'windowClass' 属性引用一些 class，因此您的代码将像：

openViewDescriptionModal(id) {
  const viewModal = this.modalService.open(ProductComponent, {size: 'lg', windowClass: 'modal-xl'});
}

然后，在您正在使用的某些 .css 上，添加您自己的 class 并自定义大小以进行覆盖，例如：

.modal-xl .modal-lg {
  max-width: 90%;
}

Answer 2

您也可以通过改变“size”变量的值来操纵这个尺寸！ this.modalContent, {backdrop: 'static',size: 'sm', keyboard: false, centered: true}

Customize NgbModal size