JQuery UI диалоговое окно css проблема под Firefox - PullRequest
Новая
       5

JQuery UI диалоговое окно css проблема под Firefox

0 голосов
/ 25 июня 2010

Я получил работу: есть веб-сайт, который содержит некоторые функции 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 Ответ

1 голос
/ 25 июня 2010

Хм ... вы можете попробовать использовать консоль Firebug для проверки ошибок консоли js, а также посмотреть на разметку и посмотреть, что происходит.

...