Question

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

我希望对话框展开以显示行，直到某个垂直尺寸（350px），此时它应显示垂直滚动条。

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

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

$.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 max-height：350px;和溢出：auto; ..应该没问题

Answer 3

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

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

我希望它适合你。

Answer 4

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

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

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

Answer 5

为我工作：

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

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

5 个答案: