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

你需要在click（）上处理这个问题，正如你所说，“用户点击弹出窗口后立即关闭弹出窗口”。

这应该这样做：

$('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');
    }
});

这是demo。

参考：event.target，closest()

Answer 2

这有点hacky但你可以尝试：

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

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

});

Answer 3

我建议将fadeOut绑定到其他事件 - 也许当用户点击弹出/模态外，或者用户点击关闭或提交按钮时？

如果你的模态对话框有这样的东西，你可以将click事件绑定到正文，或绑定到叠加。

请查看此答案，了解如何实施这些提示的示例：How to close a modal by clicking outside the modal window?

Jquery焦点问题

3 个答案: