javascript - 在 jquery ui 模式对话框上使用浏览器默认滚动条

Question

是否可以使用 jquery ui 的对话框，并将其跨越整个浏览器高度？

那么，如果有多余的页面，使用浏览器默认的滚动条上下滚动，将剩余的页面冻结在叠加层后面？

$(function()
  {
    $('#category_modal').dialog({
        autoOpen: false,
        title: 'hello',
        modal: true,
        height: auto,
        width: 500,
        resizable: false
    });
});

Answer 1

不使用默认对话框。您可以使用 CSS 使对话框 100% 高度/宽度和“溢出”文本可滚动。你的对话框在 CSS 中看起来像这样：

#dialog_box {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
}

如果需要，您还可以在对话框中放置一个 iFrame。然而，这并不能完全“冻结”背景中的内容。用户总是可以选择背景并使用鼠标滚轮或简单地使用浏览器的滚动条。使用overflow-y将在对话框的边缘创建第二个滚动条，该滚动条将滚动其中的内容（如果需要）。