8

我正在尝试找到一种解决方法来增加我的引导模式的高度。我确实尝试了模态体中的最大修复方式，但是如果它变得过大，那只会切断我的模态。我试图找到一种方法让它像模态在 pinterest 上的工作方式一样工作。

当模式打开时，我已经禁用了主页正文滚动。但是我在调​​整大小时遇到​​了麻烦。

有没有人有任何解决方法？

我尝试将高度添加到我的模态（高度：95%；）和 modal_body（最大高度：75%；），内容溢出父 div（模态）

我附上了一个截图来演示相同的

截屏

更新

我最终用 pintrest 类型的属性制作了自己的模态。这个问题对我帮助很大

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. 这样，无论您滚动多少，它都将始终保持在同一个地方。所以你可能看不到它的一部分。如果您想查看模态的其余部分，则需要制作它position: absolute。但问题是它总是会出现在页面顶部。但如果你想知道，我有一个解决办法

于 2012-12-24T18:18:07.803 回答