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

Question

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

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

但是这个好像没有效果。我还尝试了其他变体，但运气不佳。我还尝试添加一个对话框完整类和一个容器流体类，但它们似乎都无法将模式扩展到 .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下面的代码影响所有模态

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

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

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