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

我正在使用jQueryUI对话框和

modal=true

。在Chrome和Safari中，这将禁用通过滚动条和光标键进行滚动（使用鼠标滚轮滚动和上/下翻页仍然有效）

如果对话框太高，无法放在一个页面上，这就是一个问题——笔记本电脑上的用户会感到沮丧

三个月前，有人在jQuery bug追踪器上提出了这个问题——看来修复它并不是当务之急

任何人也会：

有办法解决这个问题吗

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

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

EDIT:支持Rowan Beentje（他不在这么远的地方）找到解决方案。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
});

---

自担风险使用，我不知道解除绑定这些东西可能会允许什么其他unmodal行为。

我认为拥有太大的对话框违背了您的“良好可用性体验”要求。即使由于jQuery UI对话框错误，您不必有解决方法，我也会去掉这样大的对话框。无论如何，我知道可能会有一些“e”你需要适应的极端情况，所以

也就是说，如果你附上一些截图，肯定会有帮助——你问了一个关于设计的问题，但我们看不到。但我知道你可能无法/不愿意展示它的内容，所以没关系。这些是我的瞎猜；希望你觉得它们有用：

• 尝试为您的对话框使用不同的布局。如果您这样做，请为所有对话框使用，而不仅仅是您遇到问题的对话框（用户不喜欢学习许多不同的UI）
• 如果找不到不同的布局，请先尝试拓宽对话框。如果有许多选项可供选择，可以将它们分为两列来找到一个好的解决方案
• 知道你已经在使用jQuery UI，试着使用选项卡。如果你有太多的选项，选项卡式面板通常是一个很好的解决方案-用户已经“习惯”了该小部件
• 您在对话框中谈到了“项”，但我们不知道项是什么。单击时是否可以以“摘要”方式显示它们，例如在左侧显示一个小列表，在右侧显示一个展开视图？例如，在左侧有一个包含项标题的列表，当您单击它们时，右侧会显示完整的内容t

---

在看不到设计的情况下，我想这是我所能做的。

我同意之前的海报，如果对话对你不起作用，重新思考你的设计可能会很好。但是，我可以提供一个建议

---

你能把对话内容放在一个可滚动的div中吗？那样的话，就不需要滚动整个页面，只需要滚动div中的内容。这个解决方法应该也很容易完成。

虽然我同意，但我认为没有制作比视口更大的对话的人，有一个在需要滚动的情况下。一个对话框在1024 x 768以上的分辨率下看起来很好，但任何不太复杂的东西看起来都很粗糙。或者说，例如，你永远不希望一个对话框出现在你网站的标题上。在我的情况下，我的广告偶尔会出现flash z索引问题，所以我永远不希望对话框出现在它们上面。Finally，一般来说，从用户那里拿走任何一种常见的控件（如滚动）都是不好的。这是一个与对话框有多大无关的问题

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

---

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

您尝试过我对对话框的扩展吗？

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

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

    //...
}

函数showPopup（）
{
//...
//actionContainer-是对话框的一个DIV
如果（$.browser.safari==true）
{
//禁用模态模式
$（“#actionContainer”）.dialog（'option'，'modal'，false）；
//手动显示覆盖div
var tempDiv=$（“”）；
css（“背景色”，“#000”）；
css（“不透明度”，“0.2”）；
tempDiv.css（“位置”、“绝对”）；
tempDiv.css（“左”，0）；
tempDiv.css（“顶部”，0）；
css（“width”，$（document.width（））；
css（“height”，$（document.height（））；
$（“正文”）。追加（临时div）；
}
//关闭对话框时删除覆盖div
$（“#actionContainer”）.bind（'dialogclose'，函数（事件，ui）{
$（“#tempOverlayDiv”）.remove（）；
});
//...
}

您可以使用以下代码：

---

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

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

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

这行得通……但这很难看

--从

---

在我的情况下，这是一个已经修复的错误：

---

使用下面的代码。它可以正常工作

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

---

如果你有病态的好奇，问题的模式是在，但需要登录几分钟才能看到。我会在中期内看看你的其他建议-谢谢。我在最近的一个项目中使用了一个可滚动的div。除了在OS X Lion上的Safari之外，它似乎对所有人都很好（在Windows 7和OS X Snow Leopard上使用Safari可以正常工作）。对于Lion，滚动条可以正常工作，但滚动条不可见。我最终在这里寻找解决该问题的方法。向下投票？至少不要误导其他人寻找解决方案！这确实有效！该错误已在jquery ui 1.10.0版（）中修复这应该被标记为正确的解决方案