[英]Click event open 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>
我正在寻找以下功能
小提琴示例http://fiddle.jshell.net/rvepks5q/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");
}
});
});
试试这个小提琴
将点击处理程序附加到单个链接
$(".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();
}
});
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");
}
});
您要分配两个点击处理程序,但它们都监听对主体的单击。
如果要使代码正常工作,则必须将侦听器分配给元素,或者使用事件冒泡查看点击的来源。
这样,您不必在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();
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.