jQuery UI对话框:如果对话框高度大于窗口高度，则垂直滚动不正确 [英] jQuery UI dialog: vertical scroll works not correct if dialog height more than window height

问题描述

这是代码:

<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>

打开对话框并且它高于主窗口时，有一个侧边滑块，如果尝试在鼠标光标的帮助下将其拖动(看起来像是锁定的)，它不会向下滑动.

When dialog is opened and it higher than main window there is a side slider and it doesn't slide down if you try to drag it with the help of mouse cursor (it seemes like locked).

但是当按下键盘上的按钮(箭头)或使用鼠标滚轮向下滚动时，滑动效果很好.

But it slides fine when to put down button (arrow) on keyboard or scroll down with mouse wheel.

这是关于jsfiddle的演示.

如何激活侧面滑块?

谢谢！

推荐答案

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

An alternative approach to not being able to use the window's sliders is to enable sliders on the dialog window, itself. These will show up automatically if you place a cap on the maximum height of the dialog but can be a little tricky with some versions of jQueryUI.

至少在我使用的jQueryUI版本(1.9)上，我需要自行指定最大高度，因为应该能够根据

At least on the version of jQueryUI that I am on (1.9) I needed to specify the maximum height on my own because the maxHeight property that should be able to be used according to the documentation didn't work*.

这是有效的方法:

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

我从窗口的高度上减去了120个像素，以适应Dialog窗口的页眉以及页脚部分的确定"按钮.

I subtracted 120 pixels off of the window's height to accommodate for the Dialog window's header -- and footer section with its "ok" button.

*如果试图调整对话框的大小，则max-height实际上会生效-但不会在显示时出现.

* The max-height actually would take affect if the dialog was attempted to be resized -- but not upon display.

这篇关于jQuery UI对话框:如果对话框高度大于窗口高度，则垂直滚动不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！