我正在尝试加大 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()">×</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;
}
我不完全确定是哪一个(或多个)完成的,但我现在看到了一个又大又宽的模态框。从下面的答案来看,它可能是模态内容。
最佳答案
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% ;
}
https://stackoverflow.com/questions/63271938/