Thickbox Modal Login

cupaball · November 27, 2009

I am in need of help. I an trying to create modal login that does the following:

[*]When the user click a button, the modal window open in an thickbox iframe (completed)

[*]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)

[*]The parent window redirect to the location passed in the json data

Here is my script for the inti page:

<!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 that includes login box:

<!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>

I am so lost....can anyone help me?

Sign In

Thickbox Modal Login

Recommended Posts

cupaball

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information