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

作成日:

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

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

CSS
.modal.fade:not(.show) .modal-dialog{    
  transform: translate(0,0) scale(0.85,0.85)!important;
}
物草 灸太郎
物草 灸太郎

WordPressでホームページを制作しつつ、休日は畑を耕したりDIYを楽しんでいます。

Loading...

コメントをどうぞ

  • メールアドレスが公開されることはありません。
  • コメント欄にURLは入力できません。
  • このサイトはreCAPTCHAによって保護されており、Googleのプライバシーポリシー利用規約が適用されます。