web-dev-qa-db-ja.com

ngx-bootstrapモーダルを中央に配置する方法

これを中央にしようとしています ngx-boostrap modal このようなCSSを使用していますが、動作していません：

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

しかし、開発ツールでは、次のようにCSSを追加できます。

.modal.dialog{
  top: 50%
}

したがって、少なくとも垂直方向の中央に配置されますが、これはdevツールにあり、 htmlテンプレート には.modal.dialogclassがありません

Ngx-bootstrapモーダルを適切にセンタリングする方法はありますか？

入力メッセージを提供し、yes/noダイアログを追加し、ユーザーの選択を出力することにより、EventEmitterを使用して、どこでも使用できる汎用モーダルコンポーネントを作成したい

次の例で Plunker を見つけましたが、別のカスタムコンポーネントで再現することはできません。

配管工の例は、次のWebサイトから入手できます。 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のみが非表示にできるため、モーダルの外側をクリックしても表示されます。

cssangularcenteringngx-bootstrapngx-bootstrap-modal
11
HDJEMAI

なぜbootstrap modal-dialog-centeredクラス：

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

次の属性を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); 
}
7
Nesan Mano

.tsファイルには、このようなコードがあります（モーダルポップアップを開くため）...

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

クラスにmodal-dialog-centeredを追加したことがわかります。これを行った後、cssでmodal-dialog-centeredクラスを変更することもできます。

6
Isham Sally

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

documentation によると、centeredプロパティをtrueに設定することにより、モーダルを垂直方向に中央に配置できます（デフォルトではfalseであるため）

const modalRef = this.modalService.open(ConfirmationDialogComponent, {
      size: dialogSize,
      centered: true 
    });
0
Mahmoud-Abdelslam