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

StackOverflow https://stackoverflow.com/questions/1617638

题

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

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

三个月前有人在 jQuery bug tracker 上提出了这个问题 - http://dev.jqueryui.com/ticket/4671 - 看起来修复它并不是当务之急。:)

任何人也一样：

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

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

编辑 ： 感谢 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
});

使用风险自负，我不知道解除绑定这个东西可能允许什么其他非模态行为。

有帮助吗？

解决方案

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

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

其他提示

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

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

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

我很想知道为什么那些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();      
    });

    //...
}

我认为太大的对话框违反了“良好的可用性体验”的要求。即使您不必因 jQuery UI 对话框错误而采取解决方法，我也会摆脱如此大的对话框。无论如何，我确实理解可能存在一些“极端”情况你需要适应，所以......

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

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

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

有一种解决方法解除绑定事件的绑定。这会在对话框的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 /拉/ 230＃issuecomment-3630449

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

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

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

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

$("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))
});
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top