javascript - Jquery 对话框高度和垂直滚动条

Question

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

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

因此，这似乎工作正常 - 对话框根据行数正确调整大小。但是，我从来没有得到垂直滚动条——所以如果我有 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();
    }
});

Answer 1

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

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

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

Answer 2

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

Answer 3

我知道这有点旧，但这些都不适合我。这是从 jQuery UI 1.10 开始工作的内容。

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

根据需要调整高度和宽度。我的对话框中有很多文本，不想滚动整个页面。

Answer 4

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

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

我希望这个对你有用。

Answer 5

对我来说工作：

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