How to center an ngx-bootstrap modal
You need to use the bootstrap class.
Add
.modal-dialog-centered
to.modal-dialog
to vertically center the modal.
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);
}
}
in the .ts file you have a code like this (to open modal popup)...
private showModal(template: TemplateRef<any>): BsModalRef {
return this.modalService.show(
template,
{ class: 'modal-lg modal-dialog-centered',
ignoreBackdropClick: true,
keyboard: false
});
}
You can see that I've added modal-dialog-centered to the class. after doing this you can also modify the modal-dialog-centered class in your css.
Try adding this attribute to your CSS: vertical-align: middle
to your .modal.dialog
class
Plunker for modal
.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);
}
Why not to use bootstrap modal-dialog-centered
class:
this.modalRef2 = this.modalService.show(ModalContentComponent,
{
class: 'modal-dialog-centered', initialState
}
);