Question

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

我正在寻找以下功能

一次打开一个弹出窗口，其他弹出窗口应自动关闭
Popup应该打开＆amp;单击单个链接时关闭

小提琴示例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");
        }
    });
});

试试这个fiddle

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

您正在分配两个点击处理程序，但两者都听取了对主体的点击。
如果您希望代码正常工作，则必须将侦听器分配给元素或使用事件冒泡来查看单击的位置是来自。
这样你就不必在你的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/

单击事件打开两个弹出窗口

5 个答案: