Question

我有两个div，在这两个div中我有<a href>来启用javascript功能。我的问题是，当我点击我的表格之外的某个地方应该隐藏那个隐藏，对于第二个div ..这是有效的，但对于第一个不是。

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

具有将被调用的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添加事件

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

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

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

现在，如果你按下弹出窗口以外的任何地方，你将隐藏

Answer 2

尝试使用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 个答案: