Chrome和Safari中jQuery用户界面对话框的滚动条问题

我同意之前的海报,如果对话不适合你,重新考虑你的设计可能会很好。不过,我可以提出一个建议。

你能把对话内容放在一个可滚动的分区里吗?这样就不需要滚动整个页面,只需要滚动DIV中的内容。这个变通方法也应该很容易完成。

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

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

虽然我同意,但聚会上的人们不做比观察窗大的对话,我认为有些情况下可能需要滚动。在分辨率更大的1024x 768中,对话框看起来可能非常好,但任何更小的对话框看起来都很紧张。或者说,例如,你不希望一个对话框出现在你的网站的标题上。在我的例子中,我的广告偶尔会出现flash z-index问题,所以我不希望在上面显示对话框。最后,一般来说,从用户那里拿走任何类型的公共控件都是不好的,比如滚动。这是一个与对话框大小不同的问题。

我很想知道为什么这些老鼠洞和老鼠洞的活动会首先出现。

我尝试了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 dialog bug,您不必有解决方法,我也会去掉这样大的对话框。不管怎样,我确实理解有些“极端”情况下你需要适应,所以…

这就是说,如果你附上一些截图,这当然会有帮助——你在问一个关于设计的问题,但我们看不到。但我知道你可能不愿意展示其中的内容,所以没关系。这些是我的 失明的 猜测;希望你发现它们有用:

• 试一试 不同的布局 为了你的对话。如果你这样做了,就为所有的对话框做,而不仅仅是那些你有问题的对话框(用户不喜欢学习很多不同的UI)。
• 如果找不到其他布局,请尝试 扩大对话范围 第一。如果您有许多选项可供选择,您可以通过将它们分为两列来找到一个好的解决方案。
• 知道您已经在使用jquery用户界面,请尝试使用 制表符 .如果您有太多的选项,选项卡式面板通常是一个很好的解决方案-用户被“使用”到那个小部件。
• 你在对话中提到了“项目”,但我们不知道项目是什么。是否有可能以“汇总”的方式显示它们,例如单击左侧的小列表和右侧的扩展视图?例如,有一个列表,其中项目标题位于左侧,单击它们时,您将在右侧得到完整的显示。

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

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

$("#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

在我的案子里表现得很迷人。

这是一个已修复的错误: 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))
});