Question

我正在使用带有modal=true的jQuery UI对话框。在Chrome和Safari中，这会通过滚动条和光标键禁用滚动（使用鼠标滚轮滚动和向上/向下翻页仍可正常工作）。

如果对话框太高而无法放在一个页面上，则会出现问题 - 笔记本电脑上的用户会感到沮丧。

有人在三个月前在jQuery bug跟踪器上提出了这个问题 - http://dev.jqueryui.com/ticket/4671 - 它看起来不像修复它是一个优先事项。：）

所有人都这样：

有解决方法吗？
有一个建议的解决方法，可以提供良好的可用性体验吗？

我正在尝试使用mouseover / scrollto表单的位，但这不是一个很好的解决方案：（

编辑：支持Rowan Beentje（他没有在SO的支持下）寻找解决方案。 jQuery UI通过捕获mouseup / mousedown事件来阻止滚动。所以下面的代码似乎解决了这个问题：

$("dialogId").dialog({
    open: function(event, ui) {
        window.setTimeout(function() {
            jQuery(document).unbind('mousedown.dialog-overlay')
                            .unbind('mouseup.dialog-overlay');
        }, 100);
    },
    modal: true
});

自担风险使用，我不知道这些东西可能允许的其他非模态行为。

Answer 1

您可以使用以下代码：jquery.ui.dialog.patch.js

它解决了我的问题。希望这是您正在寻找的解决方案。

Answer 2

我同意之前的海报，如果对话框不适合您，重新考虑您的设计可能会更好。但是，我可以提出一个建议。

您可以将对话框内容放在可滚动的div中吗？这样而不是整个页面需要滚动，只需要div内的内容滚动。这种解决方法也应该很容易实现。

Answer 3

虽然我同意，派对中没有进行比视口大的对话的人，我认为有些情况下可能需要滚动。在1024 x 768的分辨率下，对话框可能看起来非常好，但看起来不那么紧张。或者说，例如，您从不希望对话框显示在您网站的标题上。在我的情况下，我的广告偶尔会有闪存z-index问题，所以我从不希望对话框显示在它们之上。最后，一般来说，从用户那里拿走任何类型的常用控件（如滚动）是很糟糕的。这是一个与对话框有多大的问题。

我很想知道为什么那些mousedown和mouseup事件首先出现在那里。

我尝试了alexis.kennedy提供的解决方案，它可以在不破坏我在任何浏览器中看到的任何内容的情况下工作。

Answer 4

我通过禁用对话框模态模式并手动显示叠加来解决这种情况：

function showPopup()
{
    //...

    // actionContainer - is a DIV for dialog

    if ($.browser.safari == true)
    {
        // disable modal mode
        $("#actionContainer").dialog('option', 'modal', false);

        // show overlay div manually
        var tempDiv = $("<div id='tempOverlayDiv'></div>");
        tempDiv.css("background-color", "#000");
        tempDiv.css("opacity", "0.2");
        tempDiv.css("position", "absolute");
        tempDiv.css("left", 0);
        tempDiv.css("top", 0);
        tempDiv.css("width", $(document).width());
        tempDiv.css("height", $(document).height());
        $("body").append(tempDiv);
    }

    // remove overlay div on dialog close
    $("#actionContainer").bind('dialogclose', function(event, ui) {
        $("#tempOverlayDiv").remove();      
    });

    //...
}

Answer 5

我认为对话太大会违反“体面的可用性体验”要求。即使由于jQuery UI Dialog错误而没有必要解决方法，我也会摆脱这么大的对话框。无论如何，我确实理解可能存在一些需要适应的“极端”情况，所以......

那就是说，如果你附上一些截图肯定会有所帮助 - 你问一个关于设计的问题，但我们看不到它。但我知道你可能无法/不愿意展示它的内容所以没关系。这些是我的盲目猜测;希望你发现它们很有用：

为对话框尝试不同的布局。如果您这样做，请为所有对话框执行此操作，而不仅仅是您遇到问题的对话框（用户不喜欢学习许多不同的UI）。
如果找不到其他布局，请先尝试扩大对话框。如果您有多种选择可供选择，您可以通过将它们分成两列来找到一个好的解决方案。
知道您已经在使用jQuery UI，请尝试使用标签。如果您有太多选项，选项卡式面板通常是一个很好的解决方案 - 用户可以“使用”该小部件。
您在对话框中谈到了“项目”，但我们不知道项目是什么。是否有可能以“汇总”的方式显示它们，例如左边的小列表和点击它们时右边的展开视图？例如，在左侧有一个包含项目标题的列表，当您单击它们时，您将获得右侧的完整显示。

如果没有能够看到设计，我想这就是我可以去的地方。

Answer 6

有一种解决方法解除绑定事件的绑定。这会在对话框的open：事件中添加以下内容：

$("#longdialog").dialog({
    modal:true,
    open: function (event, ui) { window.setTimeout(function () {
        jQuery(document).unbind('mousedown.dialog-overlay').unbind('mouseup.dialog-overlay'); }, 100);
    }
});

这有效......但这很丑陋

- 来自https://github.com/jquery/jquery-ui/pull/230#issuecomment-3630449

在我的案例中像魅力一样工作。

Answer 7

这是一个自修复以来的错误： http://bugs.jqueryui.com/ticket/4671

Answer 8

您是否尝试过对话框的扩展程序？ http://plugins.jquery.com/project/jquery-framedialog

Answer 9

使用以下代码。它会正常工作。

$("dialogId").dialog({
      open: function(event, ui) {
            window.setTimeout(function() {
            jQuery(document).unbind('mousedown.dialog-overlay')
                        .unbind('mouseup.dialog-overlay');
             }, 100);
      },
      modal: true,
      safariBrowser: (function( $, undefined ) {
               if ($.ui && $.ui.dialog) {
                   $.ui.dialog.overlay.events = $.map('focus,keydown,keypress'.split(','), function(event) { return event + '.dialog-overlay'; }).join(' ');
               }
 }(jQuery))
});

Chrome和Safari中的jQuery UI对话框的滚动条问题

9 个答案: