how can I hide a popup box when the user clicks elsewhere?
<p>My popup box appears when I click on the button, and it only disappears when I click again on the button. This is my code:</p>

<pre><code>    $(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;

        });

    });
</code></pre>

<p>So there are two button, made with  and that is why I get the variables value from a link. How can I make the boxes disappear when I click anywhere outside the box? </p>
