jQuery UI对话框在打开时不遵循位置选项

时间:2010-05-30 20:41:53

标签: javascript jquery jquery-ui jquery-ui-dialog

我的代码曾经工作过,但我最近将jQuery UI更新为1.8,将jQuery更新为1.4,因为某些事情无效。一旦我这样做了,那些东西就开始工作了,但是,现在我注意到这个对话框将自己定位在顶部中心,而不是中间中心。

让我先解释一下代码。代码每x分钟查询一次Ajax请求,以查看上次会话被点击的时间。如果距离上次会话已经过了10分钟,则会出现一个jQuery UI对话框div,并显示会话即将过期的警告,并且有一个按钮可让您通过单独的内联Ajax重新启动会话GET请求,无需重新加载整个页面。

这是实际的麻烦。 15分钟或更长时间后,它应该关闭警告对话框(它会检查它是否已经打开,在这种情况下它可能是'),然后创建一个带有在线登录表单的新对话框,让您重新验证登录而不重新加载页面(并丢失任何未保存的,中途填写的表格)。

这是应该关闭警告的函数,创建重新登录div:

function renderReLogin() {
    if ($("#logOutWarning").dialog("isOpen")) {
        $("#logOutWarning").dialog("close"); // Close warning dialog as session has already expired
    }

    if ($("#logOutReLogin").dialog("isOpen") != true)
    {
        $('#noticeContainers').html('<div id="logOutReLogin" title="You\'ve been logged out!"><div id="logOutReLoginText"></div></div>');
    }

    $('#logOutReLoginText').html("This session has expired. In order to protect the integrity of you and your clients, we must limit sessions. To resume this session (and not lose any unsaved work) you must revalidate your credentials by logging in below.<br />" +
        '<br /><div style="color:red;text-align:center;" id="loginFeedback"></div>'+
        '<form id="reloginForm">'+
        '<table width="40%" align="center"><tr><td>E-mail:</td>'+
        '<td><input id="username" type="edit"></td></tr>'+
        '<tr><td>Password</td>'+
        '<td><input id="password" type="password"></td></tr>'+
        '</table></form>'
    );

    $('#logOutReLogin').dialog(
        {
            width: '50%',
            modal: true,
             show: 'scale',
            hide: 'scale',
            draggable: false,
            resizable: false,
            position: 'center',
            buttons: {
                "Re-Login": function() { retryLogin(); },
            }
        }
    );
}

就像我上面说的那样,警告打开正常,然后关闭。但是重新登录对话框会捕捉到视口的最顶端,而不是中间中心。

当我手动调用$(“#logOutReLogin”)。对话框(“选项”,“位置”,“中心”);在Firefox已经打开之后通过Firefox中的Firebug,它确实会到达应有的位置。它似乎只是上述函数中的开放行为。

1 个答案:

答案 0 :(得分:0)

经过反复试验后,我相信我找到了导致其失效的原因。似乎警告对话框中的隐藏动画与重新登录对话框的节目动画冲突。

我动了很多东西,注意到动画设置的注释后最令人向往的结果,所以我假设是这样 - 但它可能是我在试验时改变的事情的组合。

我不确定这是否是一个众所周知的禁忌,因为我的方式与我所做的一样。但是我觉得这个动画并不是真的需要,因为弹出的可能原因是用户没有看到标签。