Angular 6自定义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%;
}