I’m creating a website and on one page of the site (it’s .php) I have two links. The first reads register and the next reads login. I am using jquery to create a popup and which form pops up depend on the link clicked. (I am trying to do this but not able to). I have 2 files in total (logReg.php) and (popup.css).
When I click on login the login form pops up as expected, but when i click on register nothing pops up. And if I reverse these that if I put the jquery code for register first then… the register box pops up but the login doesn’t. I have read the click() function’s jquery API but it seems to me i’m doing everything right but obviously not. Any help would be greatly appreciated. BTW This code is not 100% mine I modified the code that I found for a single popup window.
Content of logReg.php
<html>
<head>
<!-- Typical stuff here. link to the popup.css & jquery.js -->
<title>MyPage</title>
<script type="text/javascript">
$(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
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 the pop closed
$('a.close, #mask').live('click', function() {
$('#mask, .login-popup').fadeOut(300, function() {
$('#mask').remove();
});
return false;
});
$("a.register-window").click(function () {
//Getting the variable's value from a link
var registerBox = $(this).attr("href");
//fade in the popup
$(registerBox).fadeIn(300);
//set the center alignment padding
var popMargTop = ($(registerBox).height() + 24) / 2;
var popMargLeft = ($(registerBox).width() + 24) / 2;
$(registerBox).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 the pop closed
$('a.close, #mask').live('click', function() {
$('#mask, .register-popup').fadeOut(300, function() {
$('#mask').remove();
});
return false;
});
});
</script>
</head>
<body>
<div id="links>
<a href="#login-box" class="login-window">Login</a>
<a href="#register-box" class="register-window">Register</a>
</div>
<div id="login-box" class="login-popup">
<form method="post" class="signin" action="">
<!-- All form stuff here -->
</form>
</div>
<div id="#register-box" class="register-popup">
<form method="post" class="signin" action="">
<!-- All form stuff here -->
</form>
</div>
</body>
</html>
first don’t use .live, upgrade jquery and use
second don’t use append, use
(i believe your bug comes from second)
also you could make a plugin of your open box code, then you bind the two at once using.on