Bootstrapでモーダルウィンドウを画面中央でズーム表示するCSS設定

Bootstrapでモーダルウィンドウを画面中央でズーム表示するCSS設定



Bootstrapのモーダルはボタンクリック時に画面上部からスライド+フェードで表示されます。
これをLightboxのように画面中央からズームしながら表示するようにCSSに追記します。

CSSの設定
transformtranslatescaleを変更するだけです。

.modal.fade:not(.show) .modal-dialog{    
  transform: translate(0,0) scale(0.85,0.85)!important;
}

See the Pen
Bootstrapのモーダルを中央でズーム表示
by JaSTIN (@JaSTIN)
on CodePen.

今日はここまで

関連する記事



こちらはいかが?


コメントを残す