javascript - 单击某处时隐藏弹出窗口

Question

我有两个 div，在这两个 div 中我有 <a href>调用 javascript 函数。我的问题是，当我单击表单之外的某个位置时，应该隐藏该隐藏，对于第二个 div ..这是有效的，但对于第一个则无效。

具有 javascript 调用的 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>  

具有要调用的 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>

这是我的 Javascript 函数:

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

谁能帮我解决这个问题吗？

Answer 1

最简单的方法

在单击隐藏所有弹出窗口时向正文添加事件

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

然后将 stopPropagation() 添加到此弹出窗口中，以防止在其中单击时隐藏。

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

现在，如果您按弹出窗口之外的任何位置，您将隐藏