2

我的 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();
}

解决了!

显然,所有模态对话框都导致了它们之间的冲突……或者其他什么。实际上,我不是 100% 确定为什么 - 但是将 modal:true 更改为 modal:false 解决了我的问题。

4

3 回答 3

2

我在使用 Firefox 时遇到了同样烦人的问题。所有其他浏览器都运行良好。

我注意到定义了多个对话框的页面上的问题(所有对话框都用 定义autoOpen: false,因此在用户单击触发的按钮之前它们不会打开dialog("open")

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

我可以通过使用任一对话框来重现,但一个简单的测试适用于一个对话框:

  1. 打开一个对话框。我第一次可以在输入框中输入文本就好了。
  2. 通过单击右上角的 X 关闭对话框。
  3. 从 #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 中(至少在我使用的版本中) - 现在即使您只打开/关闭/重新打开其中一个对话框(所以其他对话框是那里,但从来没有“开放”过他们)。

对我有用的 hack 修复是在加载 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 粉丝,并且由于我的 hack 修复工作我已经准备好关闭这张票并返回修复我自己的错误而不是修复 jQuery。希望此信息对某人有所帮助,听起来您已经决定采用 modal:false 路线(这也对我有用,但客户真的希望它是模态的......)

于 2013-04-26T18:06:40.887 回答
0
  • 销毁然后关闭作为操作顺序似乎很奇怪。
  • create_new_osc_el_dialog()功能似乎可能是相关的
  • 您在“创建”周围有引号但没有 Cancel 的事实似乎很奇怪,并且由于缩进,我无法完全判断您{}的 s 是否在正确的位置。

如果您打开了另一个对话框然后第一次打开“添加新元素”,是否会出现错误,或者仅在您打开和关闭“添加新元素”并且还打开另一个对话框的情况下?

多年来,Jquery dialog 和 firefox 显然存在许多问题。您使用的是什么版本的 JQuery 和 Firefox?

我听说过一个类似问题的建议,您尝试将对话框 div 设置为style="position:fixed",但我不知道这是否会解决您对这个问题的特定化身。

于 2012-07-27T14:29:51.577 回答
0

我也遇到了这个问题,z-indexmodal覆盖层高z-indextextbox.

多亏了这个 StackOverflow 问题,我很快找到了原因并能够解决我的问题。

于 2013-07-02T20:09:08.993 回答