【问题标题】:JQuery ui dialog css problem under FirefoxFirefox下jQuery ui对话框css问题
【发布时间】:2010-06-25 13:27:58
【问题描述】:

我找到了一份工作:有一个网站,它包含一些 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() 函数时,会显示对话框,但它是空的,不包含输入字段和文本。输入字段和文本在后台,它们是主站点的一部分(它们位于页面顶部)。

【问题讨论】:

  • Sry Pointy,你在同一时间做了同样的编辑,哈哈
  • 对话框标记包含 &lt;form&gt; 块是否有任何特殊原因?有没有可能有另一种外在形式围绕着它?我只是猜测,因为我在该标记或代码中看不到任何可能导致该问题的内容。

标签: javascript jquery css jquery-ui dialog


【解决方案1】:

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

【讨论】:

  • 谢谢你们。
    块是原因。我注释掉了,现在它也在 FF 下工作。非常感谢你! ;)
  • 很高兴你找到了它,有趣的是 jQuery 如此简单......但有时需要一段时间才能让它正常工作。
猜你喜欢
  • 2011-06-25
  • 1970-01-01
  • 2011-05-24
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-10-05
  • 2012-02-11
  • 1970-01-01
相关资源
最近更新 更多