[英]Click event open both Popup
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 我正在寻找以下功能
Fiddle example http://fiddle.jshell.net/rvepks5q/1/ 小提琴示例http://fiddle.jshell.net/rvepks5q/1/
I tried for sometime, i am doing something wrong. 我尝试了一段时间,做错了事。
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");
}
});
});
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();
}
});
Change document.body to element you want to click on. 将document.body更改为要单击的元素。
http://fiddle.jshell.net/rvepks5q/3/ http://fiddle.jshell.net/rvepks5q/3/
You can also close opened popup if you open another one. 如果您打开另一个弹出窗口,也可以关闭它。
http://fiddle.jshell.net/rvepks5q/5/ http://fiddle.jshell.net/rvepks5q/5/
js 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");
}
});
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. 这样,您不必在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/ http://fiddle.jshell.net/rvepks5q/11/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.