8

ブートストラップモーダルの高さを増やすための回避策を見つけようとしています。モーダルボディで最大の修正方法を試しましたが、サイズが大きくなるとモーダルが切断されます。私は、モーダルがピンタレストでどのように機能するかのように機能させる方法を見つけようとしています。

モーダルが開いているときは、メインページの本文のスクロールをすでに無効にしています。しかし、サイズの調整に問題があります。

誰かがそのための回避策を持っていますか？

モーダル（height：95％;）とmodal_body（max-height：75％;）に高さを追加しようとしましたが、コンテンツが親div（モーダル）からオーバーフローしました

同じことを示すためにスクリーンショットを添付しました

スクリーンショット

アップデート

私は結局、ピンタレストのような属性を使って独自のモーダルを作成しました。この質問は私がそれでたくさん助けてくれました

4

3 に答える 3

17

このjsを使用して、モーダル高さを計算してみてください。

$(document).ready(function() {
    $(".showcomments").click(function() {
        $('#myModal').modal('show');
        rescale();
    });
    $("[rel=tooltip]").tooltip();
});
function rescale(){
    var size = {width: $(window).width() , height: $(window).height() }
    /*CALCULATE SIZE*/
    var offset = 20;
    var offsetBody = 150;
    $('#myModal').css('height', size.height - offset );
    $('.modal-body').css('height', size.height - (offset + offsetBody));
    $('#myModal').css('top', 0);
}
$(window).bind("resize", rescale);

テスト： http： //jsfiddle.net/fUZxA/23/

于 2012-12-27T01:40:29.477 に答える
2

このCSSを使用することで、問題なく機能しました。

.my-modal {
  width:600px;
  height:300px;

  .modal-header {
    background-color:#ccc;
    button {
      font-size:30px;
    }
  }
  .modal-body {
    overflow-y: hidden;
    height: 100%;
    max-height:190px;
  }

}

更新：私はあなたのフィドルを調べました。モーダルに「高さ」を追加してみてください。

于 2012-12-26T01:26:01.903 に答える
1

ブートストラップモーダルはで開きますposition: fixed。このように、uがいくらスクロールしても、常に同じ場所にとどまります。そのため、その一部が表示されない場合があります。モーダルの残りの部分を見たい場合は、それを作成する必要がありますposition: absolute。しかし、これに伴う問題は、常にページの上部に移動することです。しかし、あなたが知りたいのであれば、私はこれを修正しています

于 2012-12-24T18:18:07.803 に答える