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%;
}

Answer 2

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