點擊事件打開兩個彈出窗口

Question

我必須顯示登錄名並注冊為幻燈片/彈出窗口。 以下代碼可用於一個彈出窗口，但是當我嘗試添加彈出窗口進行注冊時也會中斷。 它同時顯示彈出窗口

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

我正在尋找以下功能

• 一個彈出窗口應一次打開，其他彈出窗口應自動關閉
• 一點擊各個鏈接，彈出窗口應打開和關閉

小提琴示例http://fiddle.jshell.net/rvepks5q/1/

我嘗試了一段時間，做錯了事。

Answer 1

您可能還想嘗試一下

$(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");
        }
    });
});

試試這個小提琴

Answer 2

將點擊處理程序附加到單個鏈接

        $(".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

將document.body更改為要單擊的元素。

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

如果您打開另一個彈出窗口，也可以關閉它。

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

Answer 4

例

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

您要分配兩個點擊處理程序，但它們都監聽對主體的單擊。
如果要使代碼正常工作，則必須將偵聽器分配給元素，或者使用事件冒泡查看點擊的來源。
這樣，您不必在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/