BLOGブログ

Bootstrap4のモーダル中央表示|アニメーションも!

takefushi / 2019.02.06

Web制作・ホームページ制作

モーダルは縦中央だろ!っていう方に今回、Bootstrap4のモーダルを中央にする方法をご紹介します。

やり方はとても簡単、「modal-dialog」クラスに「modal-dialog-centered」クラスを追加するだけ!

これだけで、ポップアップされるモーダルは縦中央に表示されます。

しかし!表示される際、上からふわっと下がって表示されるのも嫌!って感じしませんか。どうせなら最初から中央にフワッと表示して欲しい。

そんな方には以下のスタイル追加するだけで、ご希望の縦中央からの表示に変更できます。

.modal.fade .modal-dialog.modal-work {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}

とても簡単ですね!

是非、お試しあれ!