Thickbox Modal Login
Posted: Fri Nov 27, 2009 5:33 pm
I am in need of help. I an trying to create modal login that does the following:
1. When the user click a button, the modal window open in an thickbox iframe (completed)
2. When the user clicks login, it submits to php script that returns json data which includes the redirect location (partially completed, this is working without the thickbox)
3. The parent window redirect to the location passed in the json data
Here is my script for the inti page:
Code that includes login box:
I am so lost....can anyone help me?
1. When the user click a button, the modal window open in an thickbox iframe (completed)
2. When the user clicks login, it submits to php script that returns json data which includes the redirect location (partially completed, this is working without the thickbox)
3. The parent window redirect to the location passed in the json data
Here is my script for the inti page:
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<link rel="stylesheet" type="text/css" href="css/thickbox.css"/>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript" src="script/thickbox.js"></script>
<style type="text/css">
.bold {
font-weight:bolder;
text-transform:uppercase;
}
</style>
</head>
<body>
<a href="login3.php?height=85&width=250&modal=true" class="thickbox" title="Please Sign In">login (modal)</a>
</body>
</html>
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Log Me In!</title>
<style type="text/css">
#wrapper {
width: 600px;
margin: 0 auto;
}
.bold {
font-weight:bolder;
text-transform:uppercase;
}
#content, #content2 {
width: 600px;
}
#content2 {
background-color:#999;
margin: 0;
}
#content {
background-color:#F00;
padding: 10px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript" src="script/thickbox.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#login_form").submit(function() {
var unameval = $("#username").val();
var pwordval = $("#password").val();
$.post("mysql_test.php", {
username: unameval,
password: pwordval
}, function(data) {
if(data.success)
{self.parent.location.href=data.redirect;
}
else {
$('#errorConsole').html(data.message);
}
},'json');
return false;
});
});
</script>
</head>
<body>
<div id="wrapper">
<div id="content2">
<form id="login_form" method="post">
<p>Username: <input type="text" id="username" /></p>
<p>Password: <input type="password" id="password" /></p>
<p><input type="submit" value="Login" /></p>
</form></div>
<div id="errorConsole"></div>
</div>
</body>
</html>