ブートストラップ公式ウェブサイトのダウンロード: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のウェブサイトへのご支援ありがとうございます!