点击事件同时打开Popup

Question

我必须显示登录名并注册为 slidedown/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>

我正在寻找以下功能

一次应打开一个弹出窗口，其他应自动关闭
单击单个链接时弹出窗口应打开和关闭

Fiddle 示例 http://fiddle.jshell.net/rvepks5q/1/

我试了一段时间，我做错了。

Answer 1

您正在分配两个点击处理程序，但它们都监听对正文的点击。
如果您希望您的代码正常工作，您必须将您的侦听器分配给元素或使用事件冒泡来查看点击来自哪里。
这样您就不必在 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/

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

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

您可能也想试试这个

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

试试这个fiddle

点击事件同时打开Popup

Click event open both Popup

javascript

jquery

css

html

popup