在Chrome和Safari中使用jQuery UI对话框的滚动条问题
我正在使用modal=true的jQuery UI对话框。 在Chrome和Safari中，通过滚动条和光标键禁用滚动（使用鼠标滚轮滚动，页面向上/向下滚动仍然有效）。
如果对话框太高而无法放在一个页面上，这是一个问题 – 笔记本电脑上的用户会感到沮丧。
有人在三个月前提出了jQuery bug跟踪器 – http://dev.jqueryui.com/ticket/4671 – 看起来好像修复它是优先级。 🙂
那么有人：
- 有这个问题的解决办法吗？
- 有一个build议的解决方法，会给一个体面的可用性经验？
我正在试验mouseover / scrollto在窗体的位，但它不是一个很好的解决scheme:(
编辑：道具罗恩Beentje（谁不是在这个afaict）find一个解决scheme。 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 });
使用自己的风险，我不知道什么其他解除这种东西可能允许的非模态行为。
我同意以前的海报，如果对话不适合你，重新考虑你的devise可能是件好事。 不过，我可以提供一个build议。
你可以把对话框的内容滚动div吗？ 这样，而不是整个页面需要滚动，只是div内的内容将需要滚动。 这个解决方法应该也很容易完成。
你可以使用这个代码： jquery.ui.dialog.patch.js
它解决了我的问题。 希望这是你正在寻找的解决scheme。
虽然我同意，党内没有进行比视口大的对话的人，我认为有些情况下可能需要滚动。 在1024 x 768的分辨率下，对话框可能看起来非常好，但看起来不那么容易。 或者说，例如，你永远不想要一个对话框显示在您的网站的标题。 在我的情况下，我有广告偶尔有闪光Z指数的问题，所以我从来不希望对话框显示在他们之上。 最后，从用户那里拿走任何一种常见的控制，比如滚动，是不好的。 这是与对话的大小分开的问题。
我会有兴趣知道为什么那些mousedown和mouseup事件是在那里。
我尝试了alexis.kennedy提供的解决scheme，它可以在不破坏我在任何浏览器中看到的任何内容的情况下中断工作。
我通过禁用对话模式模式并手动显示叠加来解决这种情况：
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对话框错误而有一个解决方法，我也会摆脱这么大的对话框。 无论如何，我明白可能有一些“极端”的情况需要适应，所以…
也就是说，如果你附加了一些截图，那肯定会有所帮助的 – 你问的是关于devise的问题，但我们看不到。 但是我知道你可能不能够/愿意显示它的内容，所以没关系。 这些是我盲目的猜测。 希望你觉得他们有用：
- 为您的对话尝试不同的布局 。 如果你这样做，所有的对话，而不只是你有问题的用户（用户不喜欢学习许多不同的用户界面）。
- 如果您找不到不同的布局，请先尝试扩大对话框 。 如果您有多种select可供select，您可以通过将它们分成两列来find一个很好的解决scheme。
- 知道您已经在使用jQuery UI，请尝试使用选项卡 。 如果您的选项太多，选项卡式面板通常是一个很好的解决scheme – 用户被“使用”到该小部件。
- 你在对话中谈到了“物品”，但我们不知道物品是什么。 是否有可能以“概括”的方式显示它们，比如左边的一个小列表，右边的一个展开的视图，当你点击它们时？ 例如，在左侧列出项目标题，点击它们即可在右侧完整显示。
如果不能看到devise，我想这就是我所能做到的。
有解决绑定事件的解决方法。 这增加了以下在打开：对话框的事件：
$("#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
在我的情况下工作就像一个魅力。
这是一个已经修复的bug： 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)) });
