これを中央にしようとしています ngx-boostrap modal このようなCSSを使用していますが、動作していません:
.modal.fade.in{
display: flex;
justify-content: center;
align-items: center;
}
しかし、開発ツールでは、次のようにCSSを追加できます。
.modal.dialog{
top: 50%
}
したがって、少なくとも垂直方向の中央に配置されますが、これはdevツールにあり、 htmlテンプレート には.modal.dialog
classがありません
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
のみが非表示にできるため、モーダルの外側をクリックしても表示されます。
なぜ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});
}
クラスにmodal-dialog-centeredを追加したことがわかります。これを行った後、cssでmodal-dialog-centeredクラスを変更することもできます。
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
});