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

Question

我正在使用具有modal=true的jQuery UI对话框。 在Chrome和Safari中，这将禁用通过滚动条和光标键进行滚动（仍然可以使用鼠标滚轮和页面上/下滚动）。

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

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

那么，有没有人：

1. 有解决此问题的方法？ 2. 有建议的解决方法可以提供良好的可用性体验？

我正在尝试在表单的一些部分上使用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
});

使用需谨慎，我不知道取消绑定此内容可能导致的其他非模态行为。

- alexis.kennedy

Answer 1

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

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

- Ricardo Rodrigues

---

jQuery UI版本1.10.0（http://dev.jqueryui.com/ticket/4671）修复了该漏洞。 - Nitin Agarwal

应该将其标记为正确的解决方案。就像 Nitin 所说的：这只需要适用于使用 jqueryui 版本 1.10.0 之前的人。 - jnoreiga

除了安卓浏览器，我尝试的所有东西都有效。 - Urbycoz

Answer 2

我同意之前的评论者的观点，如果对话框不适用于您，重新考虑设计可能是一个好主意。但是，我可以提供一个建议。

你能把对话内容放在一个可滚动的div里吗？这样，整个页面不需要滚动，只需要滚动div内的内容即可。这种解决方法应该很容易实现。

- Tim Banks

---

我在最近的一个项目中使用了可滚动的div。它似乎对除OS X Lion上的Safari外的所有内容都有效（但在Windows 7和OS X Snow Leopard上的Safari上运行良好）。对于Lion，滚动是有效的，但滚动条不可见。我最终在这里寻找解决该问题的方法。 - patridge

Answer 3

我通过禁用对话框模态模式并手动显示覆盖层来解决这个问题：

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

    //...
}

- Anton Palyok

Answer 4

虽然我同意不要让对话框比视口还要大的党派，但我认为有些情况下需要滚动。一个对话框在分辨率大于1024 x 768时看起来很好，但在小于此像素时则显得很拥挤。或者例如，您永远不希望对话框显示在网站标题栏上方。在我这种情况下，广告会偶尔出现闪存层叠问题，因此我永远不希望对话框显示在它们上面。最后，从用户角度来说，剥夺任何通用控件（如滚动条）都是不好的。 这是与对话框大小无关的另一个问题。

我想知道为什么会出现那些mousedown和mouseup事件。

我尝试了alexis.kennedy提供的解决方案，并且它在所有浏览器中都能正常工作，没有发现任何问题。

- Adrian Adkison

Answer 5

有一种解决方法是解除绑定的事件。这需要在对话框的打开事件中添加以下内容：

$("#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

在我的情况下，它非常有效。

- linuxeasy

---

踩负面评价是为了什么？至少不要误导其他寻找解决方案的人！这个方法真的有效！ - linuxeasy

Answer 6

我认为拥有太大的对话框会违反您对“良好可用性体验”的要求。即使您不必因jQuery UI对话框错误而使用解决方法，我也会摆脱这样大的对话框。无论如何，我理解可能存在一些“极端”情况需要您进行调整，所以...

话虽如此，如果您附上一些截图肯定会有所帮助 - 您正在询问设计问题，但我们看不到它。但我理解您可能无法或不愿意展示其内容，那就没关系了。以下是我的猜测，希望您会发现它们有用：

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

没有看到设计，我猜这就是我的极限了。

- Seb

---

如果你有一些不健康的好奇心，可以在http://echobazaar.failbettergames.com找到相关模态框，但需要登录并花费几分钟才能看到。我会在中期内考虑你提出的其他建议 - 谢谢。 - alexis.kennedy

Answer 7

这是一个已经修复的错误： http://bugs.jqueryui.com/ticket/4671

- Jared Hales

Answer 8

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

$("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))
});

- anand vishwakarma

---

将".dialog-overlay"更改为您的对话框覆盖类名。 - anand vishwakarma

Answer 9

你试过我的对话框扩展了吗？http://plugins.jquery.com/project/jquery-framedialog

- Tracker1