web-dev-qa-db-fra.com

Comment centrer un modal ngx-bootstrap

Essayer de centrer ce modal ngx-boostrap en utilisant CSS comme ceci mais cela ne fonctionne pas:

.modal.fade.in{
  display: flex;
  justify-content: center;
  align-items: center;
}

Mais dans l'outil de développement, je peux ajouter du CSS comme ceci:

.modal.dialog{
  top: 50%
}

Donc au moins, il est centré verticalement, mais cela se trouve dans l'outil de développement et il n'y a pas de .modal.dialogclass dans le modèle html

Est-il possible de centrer correctement le modal ngx-bootstrap?

Je souhaite créer un composant modal générique à utiliser n'importe où, en fournissant un message d'entrée, en ajoutant une boîte de dialogue oui/non et en indiquant le choix de l'utilisateur (à l'aide de EventEmitter).

J'ai trouvé un exemple dans le Plunker suivant, mais je ne suis pas en mesure de le reproduire dans un composant personnalisé distinct.

L'exemple plunker provient de ce site Web: https://github.com/valor-software/ngx-bootstrap/issues/2334

Mise à jour:

Après la réponse de @Wira Xie, lorsque j'utilise le modal statique et ce CSS:

.modal-sm
{
  top: 50%;
  left: 50%;
  width:30em;
  height:18em;
  background-color: rgba(0,0,0,0.5); 
}

Le modal est centré, mais seul le Esc key peut le masquer. Ainsi, lorsque je clique en dehors du modal, il est toujours visible.

cssangularcenteringngx-bootstrapngx-bootstrap-modal
4
HDJEMAI

Essayez d'ajouter cet attribut à votre CSS: vertical-align: middle à votre classe .modal.dialog

Plunker pour 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); 
}
7
Nesan Mano

Pourquoi ne pas utiliser bootstrap modal-dialog-centered class: 

this.modalRef2 = this.modalService.show(ModalContentComponent,
     {
       class: 'modal-dialog-centered', initialState 
     }
);
3
mrapi

dans le fichier .ts vous avez un code comme celui-ci (pour ouvrir un popup modal) ...

private showModal(template: TemplateRef<any>): BsModalRef {
    return this.modalService.show(template, {class: 'modal-lg modal-dialog-centered', ignoreBackdropClick: true, keyboard: false});
  }

Vous pouvez voir que j'ai ajouté modal-dialog-centré à la classe. Après cela, vous pouvez également modifier la classe centrée sur le dialogue modal dans votre css. 

1
Isham Sally

Vous devez utiliser la classe bootstrap .

Ajoutez .modal-dialog-centered à .modal-dialog pour centrer le modal verticalement.

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);
  }
}
1
Druta Ruslan