0

我有一个在 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/

4

3 回答 3

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

这是演示。

参考：event.target，最接近（）

于 2014-01-09T05:58:39.277 回答
0

这有点骇人听闻，但您可以尝试：

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

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

});
于 2014-01-09T00:35:09.247 回答
0

我建议将淡出绑定到不同的事件 - 也许当用户点击弹出/模式之外，或者当用户点击关闭或提交按钮时？

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

查看此答案以获取有关如何实现这些想法的示例：如何通过单击模态窗口外部来关闭模态？

于 2014-01-09T00:43:00.507 回答