如何解决为ngx-bootstrap模态添加或应用多个类的方法
我想以大格式显示居中的ngx-bootstrap模态。
为此有两个类:modal-dialog-centered
和modal-lg
,但是我看不到同时应用这些类的任何方法。
在此处查看ngx-bootstrap source code时:modal-options.class.ts
有一个可选的class property
,定义为class?: string;
。但是它没有定义为我们可以应用的类的数组。
所以现在我可以使用以下方式显示模态居中位置:
this.bsModalRef = this.modalService.show(ConfirmationComponent,{class: 'modal-dialog-centered',initialState});
或大型模态但不居中:
this.bsModalRef = this.modalService.show(ModalConfirmationComponent,{class: 'modal-lg',initialState});
我试图将其添加到模式的开始模板中:
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
...
但是也没有运气,班级modal-lg
不想上班
任何人都有一个想法如何使它工作?
更新
此CSS看起来会产生一些结果,但表现不尽如人意:
::ng-deep .modal.show .modal-dialog {
-webkit-transform: translate(50%,50%);
transform: translate(0%,50%);
}
解决方法
@MikeOne提供的建议效果很好。
因此,添加以空格分隔的类将提供将多个类应用于模式的能力。
我们可以使用以下代码显示完全居中的模态:
this.bsModalRef = this.modalService.show(ModalConfirmationComponent,{class: 'modal-dialog-centered modal-lg',initialState});
到目前为止,我还没有看到官方文档中记录的位置。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。