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

Question

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

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

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

有人也是这样：

1. 有解决办法吗？
2. 有建议的解决方法，可以提供良好的可用性体验？

我正在尝试在表单的某些部分上使用鼠标悬停/滚动，但这不是一个很好的解决方案:(

编辑： 向 Rowan Beentje（他不在 SO afaict 上）表示支持，以找到解决方案。 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 的分辨率下，对话框可能看起来非常好，但任何低于 1024 x 768 的分辨率看起来都非常糟糕。或者说，例如，您永远不希望对话框出现在您网站的标题上。就我而言，我的广告偶尔会出现 Flash 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

有一种解决方法可以解除绑定事件的绑定。这会在 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 6

我认为对话过大不符合您对“良好的可用性体验”的要求。即使由于 jQuery UI 对话框错误，您不必有解决方法，我也会摆脱如此大的对话框。无论如何，我确实知道您可能需要适应一些“极端”情况，所以...

也就是说，如果您附上一些屏幕截图肯定会有所帮助 - 您正在询问有关设计的问题，但我们看不到它。但我知道您可能无法/不愿意展示它的内容，所以没关系。这些是我的盲目猜测；希望它们对您有用：

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

看不到设计，我想我能做到的就这么多了。

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))
});