jquery - 当用户点击其他地方时，如何隐藏弹出框？

Question

单击按钮时会出现我的弹出框，并且仅当我再次单击按钮时才会消失。这是我的代码：

    $(document).ready(function() {

        $('a.signUp, a.signIn').click(function() {

        //Getting the variable's value from a link 
        var popupBox = $(this).attr('href');

        if ($(popupBox).css('display')=='none'){
            // Add the mask to body
            $('#mask').show();
            //Fade in the Popup
            $(popupBox).fadeIn(300);
        } else {
            //Fade out box, and hide the mask
            $(popupBox).fadeOut(300 , function() {
                $('#mask').hide();  
            }); 
        }
        return false;

        });

    });

所以有两个按钮，用这就是为什么我从链接中获取变量值的原因。当我单击框外的任何位置时，如何使框消失？

Answer 1

试试这个

   $(popupBox).on("click", function(e){
      e.stopPropagation();
    });


    $(document).on("click", function() {
      $(popupBox).hide("fast");
    });

Answer 2

$(document).mouseup(function (e)
{
    var container = $('.popup');
    if (container.is(':visible') && container.has(e.target).length === 0)
        container.fadeOut('fast');
});

Answer 3

您可以为此使用.blur()事件或focusout()方法。它会为你解决问题。

$('#popBoxWrapperDiv').blur(function(){
//hide the popup box
});