Bootstrap ポップアップ ボックス (モーダル) の垂直方向のセンタリングの問題と解決策の詳細な説明

ブートストラップ モーダル (モーダル ボックス) コンポーネントを使用したことがある人々は、なぜ優れたポップアップ ボックスを垂直方向の中央に配置できないのかを混乱しています。私はたまたま eit プロジェクトに携わっていたので、このプロジェクトの一部のフレームワークは nttdata のルールに従う必要があったため、初めてこれに遭遇したときは非常に混乱し、良くないと感じました。使ってみると、他のポップアップボックスと何ら変わらないように思えます。これ以上の苦労はせずに、ブートストラップ ポップアップ ボックスの垂直方向の中央揃えの問題に移りましょう。私が取得したポップアップ ボックス スタイルは垂直方向の中央揃えではなく、上位 10% ですが、ページが長い場合は、特に嫌そうに見えます。

解決策は次のとおりです:

1. CSS でスタイル

.modal.fade.in {
top: 10%;
}

を見つけて変更します。これは CSS でグローバルであるため、ページ上で定義することもできます。

<style>
#myModal-help
{
top:300px;
}
</style>

#myModal-help これがモーダルのIDなので設定すればOKです。

2. js では、

bootstrap-modal.js を使用します (bootstrap.js または bootstrap.min.js を使用する場合も可能ですが、対応する場所を見つける必要があります)。

js で見つかりました (赤色は私が追加したメソッドです):

var left = ($(document.body).width() - that.$element.width()) / 2;
<strong><span style="color: #ff0000">var top = ($(document.body).height() - that.$element.height()) / 2;
var scrollY = document.documentElement.scrollTop || document.body.scrollTop; //滚动条解决办法
var top = (window.screen.height / 4) + scrollY - 120; //滚动条解决办法
</span></strong>console.log(left);
that.$element
.addClass(&#39;in&#39;)
.attr(&#39;aria-hidden&#39;, false)
.css({
left: left,
top: top,
margin: "0 auto"
});
that.enforceFocus()

見つけたら赤色を追加すればOKです。 このようにして、すべてのポップアップボックスが垂直方向の中央に配置されます。

上記は、Bootstrap ポップアップ ボックス (モーダル) の垂直方向のセンタリングの問題と解決策について編集者が紹介した関連知識です。ご質問があればお役に立てれば幸いです。編集者にメッセージを残してください。すぐに全員に返信します。また、PHP 中国語 Web サイトをサポートしていただきありがとうございます。

Bootstrap ポップアップ ボックス (モーダル) の垂直方向の中央揃えの問題と解決策の詳細な説明については、PHP 中国語 Web サイトに注目してください。