Angular ngx-bootstrap - 如何制作一个又大又宽的模态

Question

我正在尝试加大 ngx-modal 的尺寸，但运气不佳。这是我正在尝试做的事情：单击某些内容时，模式应覆盖包含网格的屏幕区域。网格约占整个桌面屏幕的 80%（目前此应用程序没有移动计划）。所以我试图让 ngx-modal 转换那个区域，但是 .modal-xl 只走了这么远，我试图通过以下方式覆盖最大宽度属性：

div .modal-dialog .modal-xl .modal-dialog-centered {
    max-width: 2500px !important;
    width: 2500px !important;

}

不过这个好像没什么效果。我还尝试了其他变体，但运气不佳。我还尝试添加一个全对话框 class 和一个容器流体 class，但它们似乎都无法将模态扩展到 .modal-xl 限制之外。

模式可以正常工作并显示得很好，这只是我想弄清楚的格式。是否可以使用 ngx-modal 让模态填满那么多屏幕？如果没有，是否有其他选项可以做到这一点？

这是我用于组件的 html（使用容器流体）：

<div class="container-fluid">
    <div class="modal-header">
        <div class="modal-body">
            <p>Modal</p>
            <button type="button" class="close" data-dismiss="modal" id="closeModal" (click)="closeModal()">&times;</button>
        </div>
    </div>
    </div>

下面是从包含组件（从单击事件）调用模态框的方式：

this.bsModalRef = this.modalService.show(MessageDetailComponent, { class: 'modal-xl modal-dialog-centered', backdrop: 'static' });

最后，应用程序使用 Angular 8.2.14

谢谢！

更新：

通过将以下内容放入 styles.scss 文件中，我确实获得了改变大小的模态：

    .container-fluid {
    max-width: 1200px !important;
    width: 1200px !important;
}

.modal-content {
    max-width: 1200px !important;
    width: 1200px !important;
}

.modal-header {
    height: 750px;
    max-width: 1200px !important;
    width: 1200px !important;
}

div .modal-dialog .modal-xl .modal-dialog-centered{
    max-width: 1200px !important;
    width: 1200px !important;
}

我不完全确定是哪一个（或多个）完成的，但我现在看到了一个又大又宽的模态。从下面的答案来看，它可能是模态内容。

Answer 1

DEMO 对于库组件，如果要效果 css ，需要将样式代码放在 styles.css 代码下面 effect all modals

.modal-dialog{
  width:100% ;
  height: 100%  ;
  margin: 0 auto;
}
.modal-content{
  width:100% ;
  height: 100%  ;
}

但是如果你只想为一个组件做这件事，那么你需要添加自定义 class 到模态并做

.test{
  width:100% ;
  height: 100%  ;
  margin: 0 auto;
}
.test .modal-content{
  width:100% ;
  height: 100%  ;
}

Angular ngx-bootstrap - 如何制作一个又大又宽的模态

Angular ngx-bootstrap - how to make a big, wide modal

css

angular

bootstrap-modal

ngx-bootstrap