Jquery 对话框高度和垂直滚动条答案

【问题标题】：Jquery dialog height and vertical scrollbarJquery 对话框高度和垂直滚动条
【发布时间】：2012-05-20 20:41:55
【问题描述】：

我通过 ajax 返回数据以填充 jquery 对话框。 ajax 基本上是一个具有可变行数的 html 表。

我希望对话框展开以显示行，直到达到一定的垂直大小（350 像素），此时它应该显示一个垂直滚动条。

所以，这似乎工作正常 - 对话框根据行数正确调整大小。但是，我从来没有得到垂直滚动条——所以如果我有 20 行，那么我只能看到最后 9 行。

如果高度超过 350 像素，我如何强制垂直滚动条？

$.ajax({
    type: 'POST',
    url: 'myurl',
    data: postdata,
    dataType: 'json',
    success: function (result) {
        if (result.success && result.data) {
            var $dialog = $('<div></div>').html(result.data).dialog({
                autoOpen: false,
                title: 'History',
                modal: true,
                height: Math.min((result.rows * 25) + 150, 350),
                width: 800
            });
            $dialog.dialog('open');

        }
        event.preventDefault();
    }
});

【问题讨论】：

标签： javascript jquery css dialog

【解决方案1】：

您应该为内容 div 添加 css 属性 overflow:auto。

$("<div></div>").css({height:"350px", overflow:"auto"});

如果您只需要垂直滚动 overflow-y:auto 和 overflow-x:hidden

【讨论】：

好的，可以，但是为什么滚动条向下滚动到对话框内容的底部，而不是顶部？
对不起，我改进了我的示例并添加了 jquery ui 对话框。 jsfiddle.net/D3ERm（在本例中 result.rows = 20）
在调用 dialog() 之后设置 css 对我有用：$("<div></div>").dialog({...}).css({height:"350px", overflow:"auto"})

【解决方案2】：

使用 css 最大高度：350px；和溢出：自动； ..应该没问题

【讨论】：

【解决方案3】：

我知道这有点老了，但这些都不适合我。这是 jQuery UI 1.10 的工作原理。

 $("#helptext").dialog({
        title: 'Blog Help',
        autoOpen: false,
        width: '90%',
        height: ($(window).height() - 200),
        modal: true
  });

根据需要调整高度和宽度。我在对话框中分配了文本，不想滚动整个页面。

【讨论】：

【解决方案4】：

我不想给出固定的 px 高度，所以我找到了一个解决方案，为模型提供以下 css 规则。

.modal {
  display: inline-block !important;
  max-height: 90%;
  overflow: auto;/* Or scroll, depending on your needs*/}

我希望它对你有用。

【讨论】：

【解决方案5】：

为我工作：

    .jconfirm-holder { 
       overflow-y: auto; 
   }

【讨论】：