Question

这是代码：

<script type="text/javascript">
    $(function(){
        var dialogOptions = {
            title: "Header",
            autoOpen: false,
            modal: true,
            width: 400,
            height: 1000
        };
        $(".wnd").dialog(dialogOptions);
        $("#btn").click(function(){ $(".wnd").dialog("open"); });
    });
</script>

<style>
    .wnd {background:yellow;height:900px;width:300px;}
</style>

<div class="wnd"></div>
<button id="btn">click me</button>

当打开对话框并且它高于主窗口时，会有一个侧滑块，如果您尝试使用鼠标光标拖动它（它看起来像锁定），它不会向下滑动。

但是当按下键盘上的按钮（箭头）或使用鼠标滚轮向下滚动时它会滑动。

这是demo on jsfiddle。

如何激活侧滑块？

谢谢！

Answer 1

一个干净的解决方案就像这样：

http://jsfiddle.net/4fc33/6/

我正在做的是包装jQuery UI overlay create方法来关闭阻止滚动正常工作的事件。

Answer 2

无法使用窗口滑块的另一种方法是在对话框窗口上启用滑块。如果你在对话框的最大高度上设置一个上限，这些将自动显示，但对于某些版本的jQueryUI可能有点棘手。

至少在我所使用的jQueryUI版本（1.9）上我需要自己指定最大高度，因为根据the documentation应该可以使用的maxHeight属性不起作用*

这是有效的：

$("#dialog").dialog({
    modal: true,
    width: "auto",
    height: "auto"
    /* maxHeight: whatever won't work, */
}).css("maxHeight", window.innerHeight-120);

我从窗口高度减去120像素，以适应Dialog窗口的页眉 - 页脚部分及其“ok”按钮。

*如果尝试调整对话框的大小，实际上最大高度会生效 - 但不会显示。

jQuery UI对话框：如果对话框高度超过窗口高度，则垂直滚动工作不正确

2 个答案: