Click event open both Popup

Question

I have to show login and register as a slidedown/popup. Following code works for one popup but breaks when i try to add popup for register also. It show both popup

<div class="register-popup">
    <a class="button-register" href="#" >Register</a>        
    <div class="popup-register">
        <a href="#" class="close">CLOSE</a>
        <form>
            <P><span class="title">Username</span> <input name="" type="text" /></P>
            <P><span class="title">Password</span> <input name="" type="password" /></P>
            <P><input name="" type="button" value="Login" /></P>
        </form>
    </div>
</div>
<div class="login-popup">
    <a class="button-login" href="#" >Login</a>        
    <div class="popup-login">
        <a href="#" class="close">CLOSE</a>
        <form>
            <P><span class="title">Username</span> <input name="" type="text" /></P>
            <P><span class="title">Password</span> <input name="" type="password" /></P>
            <P><input name="" type="button" value="Login" /></P>
        </form>
    </div>
</div>

I am looking for following functionality

• One popup should open at a time and other should close automatically
• Popup should open & close when one click on the individual links

Fiddle example http://fiddle.jshell.net/rvepks5q/1/

I tried for sometime, i am doing something wrong.

Answer 1

You may also want to try this

$(document).ready(function(){
    $(".button-register").click(function(){

        if ($(".popup-login").is(":hidden") && $(".popup-register").is(":hidden"))
        {
           $(".popup-register").slideDown("slow");
        }
        else if(!$(".popup-login").is(":hidden"))
        {
            $(".popup-login, .overlay-register").hide();
             $(".popup-register").slideDown("slow");
        }
        else if(!$(".popup-register").is(":hidden"))
        {

            $(".popup-register").slideUp("slow");
        }
    });
     $(".button-login").click(function(){

        if ($(".popup-login").is(":hidden") && $(".popup-register").is(":hidden"))
        {
           $(".popup-login").slideDown("slow");
        }
        else if(!$(".popup-register").is(":hidden"))
        {
            $(".popup-register, .overlay-register").hide();
             $(".popup-login").slideDown("slow");
        }
        else if(!$(".popup-login").is(":hidden"))
        {           
            $(".popup-login").slideUp("slow");
        }
    });
});

Try this fiddle

Answer 2

Attach click handlers to individual links instead

        $(".button-login").click(function () {
            if ($(".popup-login").is(":hidden")) {
                $(".popup-login").slideDown("slow");
            } else {
                $(".popup-login, .overlay-login").hide();
            }
        });

        $(".button-register").click(function () {
            if ($(".popup-register").is(":hidden")) {
                $(".popup-register").slideDown("slow");
            } else {
                $(".popup-register, .overlay-register").hide();
            }
        });

Answer 3

Change document.body to element you want to click on.

http://fiddle.jshell.net/rvepks5q/3/

You can also close opened popup if you open another one.

http://fiddle.jshell.net/rvepks5q/5/

Answer 4

example

js

$(".button-login").on("click", function(){
    if(!$(".popup-login").hasClass("opened")){
          $(".popup-login").show();
          $(".popup-login").addClass("opened");
          $(".popup-register").hide();
          $(".popup-register").removeClass("opened");
    }else {
          $(".popup-login").hide();
          $(".popup-login").removeClass("opened");
          $(".popup-register").hide();
          $(".popup-register").removeClass("opened");
    }
});

$(".button-register").on("click", function(){
    if(!$(".popup-register").hasClass("opened")){
          $(".popup-register").show();
          $(".popup-register").addClass("opened");
          $(".popup-login").hide();
          $(".popup-login").removeClass("opened");
    }else {
          $(".popup-register").hide();
          $(".popup-register").removeClass("opened");
          $(".popup-login").hide();
          $(".popup-login").removeClass("opened");
    }
});

Answer 5

You are assigning two click handlers, but both listen to a click on the body.
If you want your code to work you have to either assign your listeners to the elements or use event bubbling to see where the click is coming from.
That way you don't have to put unnecessary event-handlers on your dom.

var $body =           $(document.body);
var $loginButton =    $body.find('.button-login')[0];
var $registerButton = $body.find('.button-register')[0];
var $loginPopup =     $body.find('.popup-login');
var $registerPopup =  $body.find('.popup-register');

$(document.body).click(function (e) {
    if(e.target === $loginButton) {
        $registerPopup.hide();
        $loginPopup.toggle();
    }
    if(e.target === $registerButton) {
        $loginPopup.hide();
        $registerPopup.toggle();
    }
});

http://fiddle.jshell.net/rvepks5q/11/