ブートストラップモーダルコンポーネントを使用した人は混乱しています。良いポップアップボックスを垂直に中央に置くことができないのはなぜですか？私はたまたまEITプロジェクトに取り組んでいました。このプロジェクトの一部のフレームワークは、NTTDATAのいくつかのルールに従うため、Bootstrapを使用しました。私は初めてこのことに遭遇し、それが非常に対立していると感じ、それは良くないと思いましたが、それを使用したとき、私はそれが他のポップアップボックスと変わらないと感じました。ナンセンスが少なく、ポイントに到達します。ブートストラップポップアップボックスの垂直センタリングの問題は、私が得たポップアップボックスのスタイルが垂直に中心ではなく、トップ10％ですが、ページは非常に嫌です。
解決策は次のとおりです。
1。CSSで、見つける
.modal.fade.in {top：10％;}このスタイルを変更すると、大丈夫です。 CSSはグローバルなので、ページ内の特定のモーダルの（高さ）位置を定義することもできます。この方法は次のとおりです。
<style>＃mymodal-help {top：300px;} </style>＃mymodal-helpはモーダルIDであるため、設定は問題ありません。
2。JSで、
私はbootstrap-modal.jsを使用しています（bootstrap.jsまたはbootstrap.min.jsを使用している場合、それも大丈夫ですが、対応する場所を見つける必要があります）。
JSで見つかりました（赤は私が追加した方法です）：
var left =（$（document.body）.width（） - that。$ element.width（）） / 2; var top =（$（document.body）.height（） - that。$ element.height（）） / 2; var scrolly = document.documentelement.scrolltop || document.body.scrolltop; // scrollbarソリューションvar top =（window.screen.height /4） + scrolly -120; // Scrollbar Solution Console.log（左）; $ element .addclass（ 'in'）.attr（ 'aria-hidden'、false）.css（{左：左、上：上、マージン： "0 auto"}）; that.enforcefocus（）見つけたら、赤いものを追加すると大丈夫になり、すべてのポップアップボックスが垂直に中央に配置されるようにします。
上記は、編集者が紹介したブートストラップポップアップボックス（モーダル）の垂直センタリングの問題と解決策の詳細な説明です。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！