angular - 自定义 NgbModal 大小

Question

我正在使用 Angular 6和 NgbModal喜欢

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

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

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

但是只有 sm和 lg NgbModal 允许的尺寸.

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

我尝试设置像 xl 这样的值至 size但它不起作用。
我还尝试自定义模态类的 CSS，但这也不起作用。

Answer 1

您可以设置引用某个类的“windowClass”属性，因此您的代码将如下所示:

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

然后，在您使用的某些 .css 上，添加您自己的具有自定义大小的类来覆盖，例如:

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