Проблемы с фокусировкой Jquery

Question

У меня есть всплывающее окно, которое появляется через x раз, в нем есть HTML-форма и два текстовых ввода.

Я пытаюсь заставить слушателя фокуса закрыть всплывающее окно, как только пользователь нажимает вне всплывающего окна.

Для этого я попытался установить фокус на всей форме. Это успешно регистрируется, когда оба входа теряют фокус, но также регистрируется, когда переключает фокус с одного входа на другой.

Это, конечно, закрывает всплывающее окно, не позволяя пользователю заполнить форму.

HTML ниже

<form class="emailForm" name="signup" method="post" >
                Email address<br />
                <input type="text" id="rm_email" name="rm_email" />
                <br />
                First name<br />
                <input type="text" id="rm_first_name" name="rm_first_name" />
</form>

И сценарий

$('.emailForm').focusout(function() {

        //alert("focus lost");
        $('#emailPrompt').fadeOut("fast");

});

Вот сайт, если это поможет (всплывающее окно появится через короткий промежуток времени)

http://masterzangetsu.eu/

Answer 1

Вы должны справиться с этим при нажатии (), как вы сказали, "закройте всплывающее окно, как только пользователь щелкнет за пределами всплывающего окна".

Это должно сделать это:

$('body').on('click', function (e) {
    var popup = $('#emailPrompt');
    /*if the click target is NOT the popup box 
    nor its children elements*/
    if (!$(e.target).closest(popup).length) {
        popup.fadeOut('fast');
    }
});

Вот демо.

Ссылка: event.target, closest ()

Answer 2

Я бы порекомендовал связать fadeOut с другим событием - возможно, когда пользователь нажимает вне всплывающего окна или модального режима, или когда пользователь нажимает кнопку закрытия или отправки?

Вы можете привязать событие click к телу или к наложению, если в вашем модальном диалоге есть такая вещь.

Посмотрите на этот ответ пример того, как реализовать эти идеи: Как закрыть модальное окно, щелкнув за пределами модального окна?

Answer 3

Это отчасти хакерски, но вы можете попробовать:

$('.emailForm').focusout(function() {

        sleep(2000);    //2 seconds
        if(!$('.emailForm').is(":focus"))
        {
            $('#emailPrompt').fadeOut("fast");
        }

});