jQuery - Close dialog when click is made outside

Question

Every-time a user clicks on Register or Login link, a popup window appears to proceed. But the user is supposed to click Login or register link again if he wants to close the popup window. Is it possible to close the popup window if click is made outside on the webpage?

Here is the webpage link to see the live code if that helps: http://bit.ly/1oagBgx

This is the code for Dropdown menu on my webpage:

<!---dropdown--->
<script type="text/javascript">
    //<![CDATA[
    function showlogin(){
        $("#loginbox").animate({"height": "toggle"}, { duration: 800 });
        $("#regsiterbox").hide();
        $(".login a").css("color", "#bf1e1a");
        $(".create-account a").css("color", "#747474");
    }
    function showregister(){
        $("#regsiterbox").animate({"height": "toggle"}, { duration: 800 });
        $("#loginbox").hide();
        $(".create-account a").css("color", "#bf1e1a");
        $(".login a").css("color", "#747474");
    }
    //]]>
</script>
<!---dropdown--->

Any help would be appreciated !

Answer 1

You can use e.target.id as in Maulik's answer, but it might not work when you click on an element of your popup box, which cannot be delegated to the container.

You basically need two things:

1. Track the mouse hovering in and out on your popup dialog.
2. Bind an event handler for document's mouse up event, and check if the cursor is outside the popup. If the cursor is outside the popup, close it.

Tracking mouse hover: Note that the selector is [id$='box'] , so it matches all IDs that ends with 'box'. Make sure you change this as it fits for your app.

var insideMenu = false;
$("[id$='box']").hover(
    function(){
        insideMenu  = true;
    },
    function(){
        insideMenu  = false;
    }
);

Binding document's mouse-up event :

$(document).mouseup(function(){
     if(!insideMenu){
        $("#loginbox").hide();
      }
});

Answer 2

Use this simple Code

var clickNo = 2;
    function yourFunction()
        {
        switch (clickNo) 
            {
            case 1:
                // Function : This will be onClick
                // For ex : document.getElementById('id').className = "hiddenClass";
                clickNo = 2
                    return(false);
            case 2:
                // Function : This will be byDefault
                // For ex : document.getElementById('id').className = "visibleClass";
                clickNo = 1
                    return(false);
            }
        }

In the Second case define the class name in which it is visible

and in the First define the class name in which it is hidden

Answer 3

Please try this, I just made example for login dialog box you can do same for register dialog

$(document).click(function(e) {
  if( e.target.id != 'loginbox') {
    $("#loginbox").hide();
  }
});