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

我使用的是带有modal=true的jQuery UI对话框。在Chrome和Safari中,这会禁用通过滚动条和光标键的滚动(使用鼠标滚轮和页面上/下滚动仍然有效)。

如果对话框太高而无法容纳在一页上,这将是一个问题-笔记本电脑上的用户会感到沮丧。

三个月前有人在jQuery Bug跟踪器上提出了这个问题-[http://dev.jqueryui.com/ticket/4671]-似乎不应该解决它。 :)

任何人也是如此:

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

我正在尝试将mouseover / scrollto用于表单的某些位,但这不是一个很好的解决方案:(

编辑:罗恩·比尼杰(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
});

使用时,后果自负,我不知道解除绑定这些东西可能会导致哪些其他非模态行为。

9个解决方案
38 votes

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

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

Ricardo Rodrigues answered 2020-08-12T07:20:12Z
7 votes

我同意前面的张贴者的观点,如果对话框对您不起作用,那么重新考虑您的设计可能是个好方法。 但是,我可以提出建议。

您可以将对话框内容放在可滚动的div中吗? 这样,无需滚动整个页面,只需div内的内容就可以滚动。 这个解决方法也应该很容易完成。

Tim Banks answered 2020-08-12T07:19:47Z
2 votes

虽然我同意这一点,但在党内的人们不要进行大于视口的对话框,但我认为在某些情况下可能需要滚动。 分辨率大于1024 x 768的对话框可能看起来非常好,但是看起来较差的对话框却显得格格不入。 或者说,例如,您永远不希望在网站标题上方显示对话框。 就我而言,我的广告有时会出现Flash Z索引问题,因此我永远不希望对话框显示在其上方。 最后,从用户那里拿走任何种类的通用控件(例如滚动)通常是不好的。 这是一个与对话框大小无关的问题。

我想知道为什么这些mousedown和mouseup事件首先存在。

我尝试了alexis.kennedy提供的解决方案,它的工作原理没有破坏任何浏览器中都能看到的内容。

Adrian Adkison answered 2020-08-12T07:20:42Z
2 votes

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

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 answered 2020-08-12T07:21:02Z
1 votes

我认为对话过多会违反您的“体面的可用性体验”要求。 即使由于jQuery UI对话框错误而不必采取任何解决方法,我也会摆脱如此大的对话框。 无论如何,我确实知道您可能需要适应某些“极端”情况,所以...

就是说,如果您附上一些屏幕截图,那肯定会有所帮助-您在问有关设计的问题,但我们看不到它。 但我知道您可能无法/不愿意显示其内容,所以很好。 这些是我的盲目猜测; 希望您发现它们有用:

  • 为对话框尝试其他布局。 如果执行此操作,则对所有对话框进行操作,而不仅仅是对您遇到问题的对话框(用户不喜欢学习许多不同的UI)。
  • 如果找不到其他布局,请尝试首先扩大对话框。 如果您有很多选择,可以通过将它们分为两列来找到一个好的解决方案。
  • 知道您已经在使用jQuery UI时,请尝试使用选项卡。 如果选项太多,通常使用选项卡式面板是一个很好的解决方案-用户被“使用”了该小部件。
  • 您在对话框中讨论了“项目”,但我们不知道什么是项目。 是否有可能以“摘要”方式显示它们,例如单击它们时左侧的小列表和右侧的扩展视图? 例如,有一个列表,项目的标题在左侧,当您单击它们时,将在右侧显示完整的显示。

由于看不到设计,我想这是我所能做到的。

Seb answered 2020-08-12T07:21:50Z
1 votes

有一种解决方法可以解除绑定事件的绑定。 这将在对话框的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]

在我的情况下就像魅力一样。

linuxeasy answered 2020-08-12T07:22:23Z
1 votes

这是自修复以来的错误:[http://bugs.jqueryui.com/ticket/4671]

Jared Hales answered 2020-08-12T07:22:44Z
0 votes

您是否尝试过扩展对话框? [http://plugins.jquery.com/project/jquery-framedialog]

Tracker1 answered 2020-08-12T07:23:04Z
0 votes

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

$("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 answered 2020-08-12T07:23:24Z
translate from https://stackoverflow.com:/questions/1617638/scrollbar-problem-with-jquery-ui-dialog-in-chrome-and-safari