Hide pop-up when click somewhere

Question

I have two div's, and inside this two div's i have <a href> that invoce javascript function. My problem is, when i click somewhere outside my form should hide that hide, for the second div..this is working, but for the first isnt.

HTML that have javascript to invoce:

<div id="joinUs">
<a href="javascript:hideshow(document.getElementById('joinusLogin'))">
        Join us!
</div>

<div id="invite">
    <a href="javascript:hideshow(document.getElementById('inviteNowSignup'))">
        <img src="/www/assets/newImages/header/Invite.png"></img>
</div>

HTML that have div's that is going to be invoced:

<div id="inviteNowSignup">
    <div id="backgroundSignup"></div>
    </a>
    <form id="signupForm">
        <input id="signupFormFields" type="email" name="email" placeholder=" E-mail"><br />
        <input id="signupFormFields" type="text" name="name" placeholder=" Password"><br />
        <input id="signupFormFields" type="text" name="subject" placeholder=" User Name"><br />
        <input id="submitSignup" type="submit" value="SIGN UP">
    </form>

    <div id="alreadyMember">
        Already a member? Log in here.
    </div>
</div>

<div id="joinusLogin">
    <div id="backgroundJoinus"></div>
    </a>
    <form id="loginForm">
        <input id="loginFormFields" type="email" name="email" placeholder=" E-mail"><br />
        <input id="loginFormFields" type="text" name="name" placeholder=" Password"><br />
        <input id="submitLogin" type="submit" value="LOG IN">
    </form>

    <div id="signupNow">
        Don't have an account yet? Sign up here.
    </div>
</div>

Here's my Javascript function:

function hideshow(which){
if (!document.getElementById)
    return
if (which.style.display=="block")
    which.style.display="none"
else
    which.style.display="block"
}

Can anyone help me solve this problem?

Answer 1

the simplest way to do that

add event to the body on click hide all pop-ups

$('body').click(function(){
   $('your-pop-up').hide();
});

then add stopPropagation() to this pop-ups to prevent hide when click inside it.

$('your-pop-up').click(function(e){
   e.stopPropagation();
});

Now if you press any where outside your pop-ups thy will hide

Answer 2

Try to Use Color Box Plugin from Link

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'/>
        <title>Pop Up</title>
        <style>
            #joinUs{cursor:pointer; color:#0066CC}
            #invite{cursor:pointer; color:#0066CC}
        </style>
        <link rel="stylesheet" href="colorbox.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script src="../colorbox/jquery.colorbox.js"></script>
        <script>
            $(document).ready(function(){

                $("#joinUs").colorbox({inline:true, width:"50%", href:"#joinusLogin"});
                $("#invite").colorbox({inline:true, width:"50%", href:"#inviteNowSignup"});

            });
        </script>
    </head>
    <body>
<div id="joinUs">Join us!</div>
<div id="invite">Invite Now</div>  

<div style='display:none'>
<div id="inviteNowSignup">
    <div id="backgroundSignup"></div>
    </a>
    <form id="signupForm">
        <input id="signupFormFields" type="email" name="email" placeholder=" E-mail"><br />
        <input id="signupFormFields" type="text" name="name" placeholder=" Password"><br />
        <input id="signupFormFields" type="text" name="subject" placeholder=" User Name"><br />
        <input id="submitSignup" type="submit" value="SIGN UP">
    </form>

    <div id="alreadyMember">
        Already a member? Log in here.
    </div>
</div>
</div>
<div style='display:none'>
<div id="joinusLogin">
    <div id="backgroundJoinus"></div>
    </a>
    <form id="loginForm">
        <input id="loginFormFields" type="email" name="email" placeholder=" E-mail"><br />
        <input id="loginFormFields" type="text" name="name" placeholder=" Password"><br />
        <input id="submitLogin" type="submit" value="LOG IN">
    </form>

    <div id="signupNow">
        Don't have an account yet? Sign up here.
    </div>
</div>
</div>
    </body>
</html>

Hide pop-up when click somewhere

Question

2 answers

solution1
2 ACCPTED 2014-05-04 12:53:29

solution2
0 2014-05-04 13:12:43

Hide pop-up when click somewhere

Question

2 answers

solution1 2 ACCPTED 2014-05-04 12:53:29

solution2 0 2014-05-04 13:12:43

solution1
2 ACCPTED 2014-05-04 12:53:29

solution2
0 2014-05-04 13:12:43