ブートストラップ公式ウェブサイトのダウンロード：http：//v3.bootcss.com/
今日は、ブートストラップフレームワークを使用する際に遭遇する問題を共有します。製品開発中に多数のポップアップウィンドウ（モーダル）が使用されました。
私が最初にそれを使用することを学び始めたとき、私はこのウィンドウを垂直に中央に置くことができず、常に上向きであり、ドラッグすることができないことがわかりました。使用の指示を見た後、私はあまり多くの属性設定とメソッドを提供しなかったので、デフォルトの方法を使用しました。最近、顧客はリクエストを行いました。ポップアップウィンドウを中央に配置できますか？いくつかの小さな窓は上面にあるため、全体のページは不均衡であり、大きな窓はまだ受け入れられます。
私は以前にBootstrapにあまり慣れていなかったので、私はBaiduとGoogleを始めましたが、次のようにいくつかの解決策しかないことがわかりました。
$（ "＃mymodal"）。modal（）。css（{"margin -top"：function（）{return - （$（this）.height（） / 2）;}}）;参照アドレス：http：//www.g2w.me/2012/06/bootstrap-modal-shown-in-the-center/
私はこの方法を自分で試しましたが、完全に中心にありませんでした。ウィンドウのサイズが異なる場合、表示されるマージントップ値も毎回変更され、カバーレイヤーにスクロールバーがありますが、これは見た目が良くありません。
また、それらを変更するためのいくつかの方法を試しましたが、楽観的ではありませんでした。ウィンドウが表示される前に、$（this）.height（）の値を取得できないことがわかりました。 （$（window）.height（） - $（this）.height（））/2を使用していると思いましたが、まだ実行不可能であることがわかりました。
最後に、ソースコードのみを調べて、垂直センタリングを実現するために900行のbootstrap.jsファイルの後に次のコードを追加できることがわかります。
$ element.children（）。eq（0）.css（ "position"、 "absolute"）。css（{"margin"： "0px"、 "top"：function（）{return（that。$ element.height（） - that。$ element.children（）。 （that。$ element.width（） - that。$ element.children（）。eq（0）.width（）） / 2 + "px";}}）;ページコードは次のとおりです。
<div><button data-toggle="modal" data-target="#myModal">Launch demo modal</button><!-- Modal --><div id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div><div><div><button type="button" data-dismiss="modal" aria-hidden = "true">×</button> <h4 id = "mymodallabel">モーダルタイトル</h4> </div> <div> ... </div> <div> <button = "button" data-dismiss = "modal"> close </button> <button type = "button" /.Modal-Dialog-> < /div> <！ - /.Modal-> < /div>
レンダリングは次のとおりです。
上記は、編集者が紹介したブートストラップモーダルボックス（モーダル）の垂直センタリングの例です。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！