我在一个页面中有3个Jquery弹出窗口。当我打开一个窗口说登录弹出,然后我打开另一个说反馈弹出,我需要让我的登录弹出关闭,当我点击反馈弹出链接。这里是我的登录弹出的示例代码。我对反馈弹窗也使用了同样的方法。请帮我解答一下我的问题。提前感谢大家。
$(document).ready(function() {
$('a.login-window').click(function() {
//Getting the variable's value from a link
var loginBox = $(this).attr('href');
//Fade in the Popup
$(loginBox).fadeIn(300);
//Set the center alignment padding + border see css style
var popMargTop = ($(loginBox).height() + 24) / 2;
var popMargLeft = ($(loginBox).width() + 24) / 2;
$(loginBox).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
// Add the mask to body
$('body').append('<div id="mask"></div>');
$('#mask').fadeIn(300);
return false;
});
// When clicking on the button close or the mask layer the popup closed
$('a.close, #mask').live('click', function() {
$('#mask , .login-popup').fadeOut(300 , function() {
$('#mask').remove();
});
return false;
});
为这三个弹出窗口添加一个公共类。当显示弹出窗口时,先隐藏其他弹出窗口,然后显示当前弹出窗口。
<div class="popup1 popup">Menu</div>
<div class="popup2 popup">Login</div>
<div class="popup3 popup">FeedBack</div>
JS
$('a.login').click(function(){
$('.popup').hide();
---- your code ----
});
更新:抱歉忘记了jQuery的另一半,我现在修复了我的答案。
我不太确定如何使你的代码与你想做的工作,但这里有一个代码片段,我在我所有的项目中使用很多,希望它能帮助你和更多。
var first = true;
var second = true;
$(document).ready(function () {
$(".signup").slideToggle();
$(".login").slideToggle();
$("#signup").toggleClass("active");
$("#login").toggleClass("active");
$("#signup").click(function () {
$(".signup").slideToggle();
first = true;
$(this).toggleClass("active");
if (!$("#login").hasClass('active')) {
$(".login").slideToggle();
second = false;
$("#login").toggleClass("active");
}
return false;
});
$("#login").click(function () {
$(".login").slideToggle();
second = true;
$(this).toggleClass("active");
if (!$("#signup").hasClass('active')) {
$(".signup").slideToggle();
first = false;
$("#signup").toggleClass("active");
}
return false;
});
});
,这里是我的jQuery代码片段的HTML
<div id="signup">
Sign Up
</div>
<div class="signup">
Email:<br>
<input type="text">
<br>
Password:<br>
<input type="password">
<br>
Verify Password:<br>
<input type="password">
</div>
<div id="login">
Login
</div>
<div class="login">
Email:<br>
<input type="email">
<br>
Password:<br>
<input type="password">
</div>