尝试使用这样的CSS来居中这个ngx-boostrap modal,但它不起作用:
.modal.fade.in{
display: flex;
justify-content: center;
align-items: center;
}
但是在开发工具中,我可以像这样添加CSS:
.modal.dialog{
top: 50%
}
所以至少它是垂直居中的,但这是在开发工具中,并且在.modal.dialog
中没有html templateclass
有没有办法正确居中ngx-bootstrap模式?
我想通过提供输入消息并添加是/否对话框并输出用户选择(使用EventEmitter)来创建一个通用模态组件以在任何地方使用它
我在以下Plunker中找到了一个示例,但无法在单独的自定义组件中重现它。
plunker的例子来自这个网站:https://github.com/valor-software/ngx-bootstrap/issues/2334
更新:
在@Wira Xie回答之后,当我使用Static modal和这个CSS:
.modal-sm
{
top: 50%;
left: 50%;
width:30em;
height:18em;
background-color: rgba(0,0,0,0.5);
}
模态显示居中,但只有Esc key
可以隐藏它,所以当我点击模态外,它仍然可见。
为什么不使用bootstrap modal-dialog-centered
类:
this.modalRef2 = this.modalService.show(ModalContentComponent,
{
class: 'modal-dialog-centered', initialState
}
);
尝试将此属性添加到您的CSS:vertical-align: middle
到您的.modal.dialog
类
.modal.fade {
display: flex !important;
justify-content: center;
align-items: center;
}
.modal-dialog {
vertical-align:middle;
height:18em;
background-color: rgba(0,0,0,0.5);
}
在.ts文件中你有这样的代码(打开模态弹出窗口)...
private showModal(template: TemplateRef<any>): BsModalRef {
return this.modalService.show(template, {class: 'modal-lg modal-dialog-centered', ignoreBackdropClick: true, keyboard: false});
}
你可以看到我已经在类中添加了以模态对话为中心。执行此操作后,您还可以修改css中以模态对话为中心的类。
你需要使用bootstrap class。
将
.modal-dialog-centered
添加到.modal-dialog
以垂直居中模态。
import { Component, OnInit, TemplateRef } from '@angular/core';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
@Component({
...
})
export class ModalComponent {
modalRef: BsModalRef;
// Here we add another class to our (.modal.dialog)
// and we need to pass this config when open our modal
config = {
class: 'modal-dialog-centered'
}
constructor(private modalService: BsModalService) { }
openModal(template: TemplateRef<any>) {
// pass the config as second param
this.modalRef = this.modalService.show(template, this.config);
}
}
根据documentation,您可以通过将centered属性设置为true来垂直居中模式(默认情况下为false)
const modalRef = this.modalService.open(ConfirmationDialogComponent, {
size: dialogSize,
centered: true
});
这是我使用ngx-bootstrap的个人项目的片段。
.modal-sm
{
top: 50%;
left: 50%;
width:30em;
height:18em;
margin-top: -9em;
margin-left: -15em;
background-color: #001b00;
/*position:fixed;*/
}
<!--typecript files-->
<script>
//here is the typesciprt file
export class AppComponent
{
//for default ngx-bootstrap modal
public modalRef: BsModalRef;
constructor(private modalService: BsModalService) {}
public openModal(template: TemplateRef<any>) {
this.modalRef = this.modalService.show(template);
}
}
</script>
<!--end of ts file-->
<!--Modal-->
<div class="container">
<div bsModal #smModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title pull-left">Small modal</h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="smModal.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
<!--enf of modal-->