CODEWITHSUNDEEP
javascriptjqueryhtml
user3292724
user3292724

Reputation: 11

jQuery - Close dialog when click is made outside

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 !

Upvotes: 1

Views: 328

Answers (3)

HateScraperKavi
HateScraperKavi

Reputation: 188

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

Upvotes: 2

Maulik patel
Maulik patel

Reputation: 1601

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

Upvotes: 0

ArmaGeddON
ArmaGeddON

Reputation: 339

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

Upvotes: 0

Related Questions