滚动条问题与Chrome和Safari

Question

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

这是一个问题，如果对话框太高，以适应在一个页面上 - 在笔记本电脑上的用户感到沮丧。

有人提出这个三个月前了jQuery bug跟踪系统 - http://dev.jqueryui.com/ticket/4671 - 它看起来并不像修正它是当务之急。 :)

因此，没有人：

1. 对此有一个解决？
2. 有一个建议的解决方法，会给一个体面的可用性经验？

我与鼠标悬停/ scrollto实验的形式的位，但它不是一个很好的解决方案:(

编辑：道具罗文Beentje（谁不是在SO AFAICT）查找。解决这个jQuery UI的防止通过捕捉鼠标松开/鼠标按下事件滚动所以下面的代码似乎解决它：在自己的风险

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

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

Answer 1

我同意以前的海报，如果对话不适合你，重新考虑你的设计可能是件好事。不过，我可以提供一个建议。

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

Answer 2

我相信有太大的对话是违反你的'体面的可用性经验'的要求。即使你不必因jQuery UI对话框错误而有一个解决方法，我也会摆脱这样的大对话。反正我知道有可能是在您需要调整一些“极端”的情况下，所以...

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

• 尝试一个不同的布局为您的对话框。如果你这样做，对所有的对话框都做，而不只是你有问题的对象（用户不喜欢学习许多不同的用户界面）。
• 如果你不能找到一个不同的布局，尽量拓宽你的对话框第一。如果您有多种选择可供选择，您可以通过将它们分成两列来找到一个很好的解决方案。
• 知道你已经在使用jQuery UI，请尝试使用标签。如果您的选项太多，选项卡式面板通常是一个很好的解决方案 - 用户可以使用该小部件。
• 您在对话框中提到了'物品'，但我们不知道物品是什么。当你点击它们时，是否有可能以“总结”的方式显示它们，例如左侧的小列表和右侧的扩展视图？例如，在左侧列出项目标题，点击它们即可在右侧完整显示。

不能看到设计，我想这就是我可以去。

Answer 3

虽然我同意党内没有进行比视口大的对话的人，但我认为有些情况下可能需要滚动。对话框在1024 x 768以上的分辨率下可能看起来非常好，但看起来不那么紧凑。或者说，例如，你永远不想让对话框显示在你网站的标题上。就我而言，我的广告偶尔会出现flash z-index问题，所以我从不希望对话框显示在上面。最后，一般来说，将任何类型的常用控件（例如滚动）从用户身上移走是不利的。这是与对话的大小分开的问题。

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

我试过alexis.kennedy提供的解决方案，它能够在不破坏我在任何浏览器中看到的任何内容的情况下突破。

Answer 4

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

Answer 5

我通过手动禁用对话模式模式，并显示覆盖解决此情况：

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 6

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

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

Answer 7

解决绑定事件有一个解决方法。这增加了在开放以下内容：对话框的事件：

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

这工作......但是这是丑陋的

--from https://github.com/jquery/jquery-ui/pull/230#issuecomment-3630449

工作就像在我的案件魅力。

Answer 8

这是一直以来修正了一个错误： http://bugs.jqueryui.com/ticket/4671

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