Firefox下的JQuery ui对话css问题

时间:2010-06-25 13:27:59

标签: javascript jquery css jquery-ui dialog

我找到了一份工作:有一个网站,其中包含一些ExtJ功能。我必须将这些更改为JQuery函数。

我开始改变对话框了。在IE8 / IE7下它工作正常,但在FF 3.5.10下它并不完美。

我正在使用的代码是:

<div id="dialog-lostpassword" title="Elfelejtett jelszó">
  <p class="validateTips">Kérjük adja meg az e-mail címét:</p>

  <form>
      <fieldset>
        <label for="dialog_lostpassword_email">E-mail:</label>
        <input type="text" name="dialog_lostpassword_email" id="dialog_lostpassword_email" value="" class="text ui-widget-content ui-corner-all" />
      </fieldset>

      <div align = 'center'>
        Ha Ön még nem rendelkezik hozzáféréssel, <a href = '../regisztracio.op'>itt regisztrálhat</a>!
        Elfelejtette jelszavát? <a href="javascript:showLostPasswordWindow();" >Ide kattintva</a> igényelhet újat!
      </div>

    </form>
</div>

Javascript:

function showLostPasswordWindow() {
    $('#dialog-lostpassword').dialog('open');
};

$(function () {
    $("#dialog").dialog("destroy");

    var dialog_lostpassword_email = $("#dialog_lostpassword_email"),
        allFields = $([]).add(dialog_lostpassword_email),
        tips = $(".validateTips");

    function updateTips(t) {
        tips
            .text(t)
            .addClass('ui-state-highlight');
        setTimeout(function() {
            tips.removeClass('ui-state-highlight', 1500);
        }, 500);
    }

    function checkLength(o,n,min,max) {

        if ( o.val().length > max || o.val().length < min ) {
            o.addClass('ui-state-error');
            updateTips("Az e-mail cím hossza " + min + " és " + max + " között kell legyen" + ".");
            return false;
        } else {
            return true;
        }

    }

    function checkRegexp(o,regexp,n) {

        if ( !( regexp.test( o.val() ) ) ) {
            o.addClass('ui-state-error');
            updateTips(n);
            return false;
        } else {
            return true;
        }

    }

    $("#dialog-lostpassword").dialog({
        autoOpen: false,
        height: 250,
        width: 380,
        modal: true,
        buttons: {
            'Küldés': function() {
                var bValid = true;
                allFields.removeClass('ui-state-error');

                bValid = bValid && checkLength(dialog_lostpassword_email,"",6,80);
                bValid = bValid && checkRegexp(dialog_lostpassword_email,/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i,"Hibás az e-mail cím formátuma.");

                if (bValid) {
                    // ha 'Küldés' gombra kattintotunk és valid minden
                    $(this).dialog('close');
                }
            },
            'Mégsem': function() {
                $(this).dialog('close');
            }
        },
        close: function() {
            allFields.val('').removeClass('ui-state-error');
        }
    });
});

问题是:

在FF中,当我调用showLostPasswordWindow()函数时,对话框显示,但它是空的,不包含输入字段和文本。输入字段和文本在后台,它们是主站点的一部分(它们位于页面顶部)。

1 个答案:

答案 0 :(得分:1)

嗯......您可以尝试使用Firebug控制台检查js控制台错误,还可以查看标记并查看发生了什么。