Question

我的jquery对话框在Firefox中无法正常工作，但Firebug没有给我任何错误。我的对话框在Chrome中完美运行。

情况： 我的页面上有几个jquery对话框，可以打开不同的事件。一个“添加新元素”对话框给我一个问题。对话框第一次打开时工作正常。随后的任何时候，都无法点击或输入文本输入框。我想我每次都会通过销毁对话框来解决问题。然后每次打开它都会有效。但后来我发现如果打开任何其他对话框然后打开这个“添加新元素”对话框，同样的事情又发生了：不能在框中输入。

我很困惑!!!!拜托，非常感谢任何帮助......我几天来一直在盯着这段代码。

这是jquery对话框代码：

$(function() {

    $( "#dialog-new-osc-el" ).dialog({
        resizable: false,
        autoOpen: false,
        height:300,
        width:400,
        modal: true,
        buttons: {
            "Create": function() {

*create button function stuff here* then:

            $(this).dialog("destroy");
        $( this ).dialog( "close" );
                    create_new_osc_el_dialog();
            },
            Cancel: function() {
            $(this).dialog("destroy");
                $( this ).dialog( "close" );
                create_new_osc_el_dialog();
            }
        },
            close: function() {
            $(this).dialog("destroy");
                $( this ).dialog( "close" );
                create_new_osc_el_dialog();
            }
    });
});

单击“添加新元素”div时会打开对话框 - div具有onclick功能：

<div class="addnewbox" onclick="addneweltoosc();">

此onclick函数如下所示（为简洁起见，删除了一些代码）：

    function addneweltoosc(){
                $( "#dialog-new-osc-el" ).dialog( "open" );
}

对话框的实际HTML很长，这里有重要的东西：

<div id="dialog-new-osc-el" title="Create Element">

<div id="new_osc_el_type" class="pointer">
<ul>
<li onclick="new_osc_el_type_chosen('Branch');">Branch</li>
<li onclick="new_osc_el_type_chosen('Group');">Group</li>
<li onclick="new_osc_el_type_chosen('Division');">Division</li>
<li onclick="new_osc_el_type_chosen('Unit');">Unit</li>
<li onclick="new_osc_el_type_chosen('Strike Team');">Strike Team</li>
<li onclick="new_osc_el_type_chosen('Task Force');">Task Force</li>
<li onclick="new_osc_el_type_chosen('Individual Resource');">Individual Resource</li>
</ul>
</div>
<p><input class="hide" type="text" id="new_osc_el_pos_name" />
</div>

该对话框首先为用户提供了一个可供选择的列表。当用户单击列表项时，将调用new_osc_el_type_chosen函数。此函数隐藏该列表并显示“new_osc_el_pos_name”文本输入。 这是第一次打开对话框时有效的输入框，但不是之后。这是代码：

function new_osc_el_type_chosen(a)

{
$("#new_osc_el_type").addClass("hide");
$("#new_osc_el_pos_name").removeClass("hide");
if (a=="Branch")
{
$("#new_osc_el_pos_name").val("NAME of Branch Director");
}
document.getElementById("new_osc_el_pos_name").setSelectionRange(0,7);
$("#new_osc_el_pos_name").focus();
}

解决！

显然所有的模态对话都会导致他们之间发生冲突......或其他什么。实际上，我并不是百分百肯定为什么 - 但是改变模态：真实模态：假解决了我的问题。

Answer 1

我遇到了与Firefox相同的恼人问题。所有其他浏览器都很棒。

我注意到在定义了多个对话框的网页上存在问题（全部都是使用autoOpen: false定义的，所以在用户点击触发dialog("open")

的按钮之前，它们才会打开

我有两个简单的对话框，每个对话框都有一个input type="text"和两个按钮（input type="button"，用于“取消”和“确定”）。

我可以使用任一对话框重现，但是一个简单的测试可以使用一个对话框：

打开一个对话框。我可以在第一次输入框中输入文本。
单击右上角的X关闭对话框。
从＃1打开相同的对话框。在所有浏览器中除了Firefox我可以在框中输入就好了。在firefox中，一切都看好了（模态层在对话框后面，但在其他一切之前），但根本没有用。

我尝试增加输入的z-index及其对话框div。我试着减少模态层的z-index。我甚至删除了模态div元素。这些都没有效果。然后我在jquery-ui.js中搜索了“modal”（正在使用jQuery UI - v1.9.2）并发现这部分是问题（我确认通过评论输出问题就消失了）。

问题来源，来自jquery-ui.js（1.9.2）：

// adjust the maxZ to allow other modal dialogs to continue to work (see #4309)
if ( this.options.modal ) {
    maxZ = 0;
    $( ".ui-dialog" ).each(function() {
        if ( this !== that.uiDialog[0] ) {
            thisZ = $( this ).css( "z-index" );
            if ( !isNaN( thisZ ) ) {
                maxZ = Math.max( maxZ, thisZ );
            }
        }
    });
    $.ui.dialog.maxZ = maxZ;
}

我在jQuery UI错误跟踪器上找到了＃4309：http://bugs.jqueryui.com/ticket/4309

似乎问题已针对所有浏览器修复，但问题仍然存在于Firefox中（至少在我正在使用的版本中） - 现在即使您只打开/关闭/重新打开其中一个对话框也会出现（所以其他对话框在那里，但从来没有“打开”调用它们。）

对我有用的黑客修复是在加载jquery-ui.js后执行此操作：

if ($.browser.mozilla)
{
    // fix firefox z-index bug with modal jquery UI dialog that prevents user from typing after initial modal dialog opened
    $.fn.dialogOriginal = $.fn.dialog; // save original dialog() function
    $.fn.dialog = function ()
    {
        if (!$(this).data("fixModalZIndex"))
        {
            // bind events only once
            $(this).data("fixModalZIndex", true).bind("dialogbeforeclose", function (event, ui)
            {
                // unhook modal behavior to fix firefox bug
                $(this).dialog("option", "modal", false);
            }).bind("dialogclose", function (event, ui)
            {
                var ref = $(this); // save reference for later
                setTimeout(function ()
                {
                    ref.dialog("option", "modal", true); // set back to modal, but in a timeout to avoid the z-index input bug
                    ref = null;
                }, 0);
            });
        }
        return $.fn.dialogOriginal.apply(this, arguments); // call original dialog function
    };
}

真的不明白这个。可能有助于通过maxZ逻辑调试，但我不是Firefox的粉丝，因为我的黑客修复工作，我准备关闭这个票，然后回去修复我自己的错误而不是修复jQuery。希望这个信息对某人有帮助，听起来你已经决定去模态：假路线（这也适用于我，但客户真的想要模态...）

Answer 2

我也遇到了这个问题，当z-index叠加层的modal高于z-index时，它会成为textbox问题。

感谢this StackOverflow question我很快就找到了原因，并且能够解决我的问题。

firefox中的jquery对话框问题：第一次打开后无法输入

2 个答案: