单击某处时隐藏弹出窗口

Question

I have two div's, and inside this two div's i have <a href> that invoce javascript function. 我有两个div，在这两个div中我有<a href> invoce javascript功能。 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. 我的问题是，当我点击我的表格之外的某个地方应该隐藏那个隐藏，对于第二个div ..这是有效的，但是对于第一个不是。

HTML that have javascript to invoce: 有javascript to invoce的HTML：

<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的HTML将被调用：

<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: 这是我的Javascript函数：

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隐藏所有弹出窗口

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

then add stopPropagation() to this pop-ups to prevent hide when click inside it. 然后在此弹出窗口中添加stopPropagation()以防止在其中单击时隐藏。

$('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 尝试使用Link中的 Color Box插件

<!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>

单击某处时隐藏弹出窗口

问题描述

2 个解决方案

解决方案1
2 已采纳 2014-05-04 12:53:29

解决方案2
0 2014-05-04 13:12:43

单击某处时隐藏弹出窗口

问题描述

2 个解决方案

解决方案1 2 已采纳 2014-05-04 12:53:29

解决方案2 0 2014-05-04 13:12:43

解决方案1
2 已采纳 2014-05-04 12:53:29

解决方案2
0 2014-05-04 13:12:43