简体   繁体   中英

Pop-up login close when clicked on recover password

With this code, when a user click inside my pop-up form this pop-up stay. But when the user click in the ? to recover the password the pop-up for that is showed, but doesnt close the login form.

Any ideas how to close the login pop-up??

HTML Code:

   <div id="joinusLogin">
        <div id="backgroundOpacity"></div>
        <form id="loginForm">
            <input id="loginFormFields" type="email" name="email" placeholder=" E-mail"/><br />
                <input id="loginFormFields" type="text" name="password" placeholder=" Password"/>
                <div id="requestPassword">
                    <a href="javascript:hideshow(document.getElementById('passwordRecover'))">?</a>
                </div>
            <br />
                <input id="submitLogin" type="submit" value="LOG IN"/>
        </form>

        <div id="signupNow">
            Don't have an account yet? 
            <a href="javascript:hideshow(document.getElementById('inviteNowSignup'))">
                Sign up here.
            </a> 
        </div>
    </div>

    <div id="passwordRecover">
        <div id="backgroundOpacity"></div>
            <form id="passwordRecoverForm">
                <input id="passwordRecoverFields" type="email" name="email" placeholder=" E-mail"/><br />
                    <input id="submitPasswordRecover" type="submit" value="SEND PASSWORD"/>
            </form>

        <div id="signupNow">
            Don't have an account yet? 
            <a href="javascript:hideshow(document.getElementById('inviteNowSignup'))">
                Sign up here.
            </a> 
        </div>
    </div>

Javscript Code

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

$('body').click(function(){
  $('#inviteNowSignup, #joinusLogin, #passwordRecover').hide();
});

$('body').on('click',"#signupForm, #loginForm, #passwordRecoverForm",function (e){
  e.stopPropagation();
});

As seen in your code. You have handled the opening and closing of those elements which have been clicked and passed to your function. But you have not handled those which are already open.

Try to add this line before the function

   $('#inviteNowSignup, #joinusLogin').hide(); 

It will hide the other divs. BTW nice work with single function to hide and unhide.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM