Angular ngx-bootstrap - 如何制作大而宽的模态答案

【问题标题】：Angular ngx-bootstrap - how to make a big, wide modalAngular ngx-bootstrap - 如何制作大而宽的模态
【发布时间】：2020-08-05 19:05:08
【问题描述】：

我正在尝试加大 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;
}

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

【问题讨论】：

你试过把它放到styles.css中吗？
很好的说明 - 是的，我在 styles.scss 和 component.css 中都试过了

标签： css angular bootstrap-modal ngx-bootstrap

【解决方案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%  ;
}

【讨论】：