Implement a jQuery AJAX Login Form into a Modal Box using fancybox.net modal box
Integrate an Jquery AJAX Login Form into a Modal Box using a fancybox modal box This will show you how to implement JQuery ajax using facybox.
//jquery ajax
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#login_form").submit(function() {
var unameval = $("#username").val();
var pwordval = $("#password").val();
$.post("login.php", { username: unameval, //login.php
password: pwordval }, function(data) {
$("#status").html(data);
});
return false;
});
});
</script>
//fancybox javascript
<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<link rel="stylesheet" href="style.css" />
<script type="text/javascript">
$(document).ready(function() {
$("#various1").fancybox({
'titlePosition' : 'inside',
'transitionIn' : 'none',
'transitionOut' : 'none'
});
});
</script>
//CSS
<style type="text/css">
form.registration{
width:570px;
float:left;
}
form.registration fieldset{
border-top:0px solid #ccc;
border-left:0;
border-bottom:0;
border-right:0;
padding:6px;
margin:0px 20px 0px 0px;
}
form.registration label{
font-size: 20px;
width:190px;
float: left;
text-align: right;
color:#7F7F7F;
clear:left;
margin:10px 4px 0px 0px;
padding:0px;
}
form.registration .textboxinput{
font-family: Georgia;
font-size: 28px;
float:left;
width:280px;
border:1px solid #cccccc;
margin:2px 0px 2px 2px;
color:#00abdf;
height:32px;
padding:3px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.button {
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.50);
-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.50);
box-shadow:0 1px 3px rgba(0, 0, 0, 0.50);
background:#222222 url(button-overlay.png) repeat-x;
border:1px solid rgba(0, 0, 0, 0.25);
color:#FFFFFF !important;
cursor:pointer;
display:inline-block;
font-size:13px;
font-weight:bold;
line-height:1;
overflow:visible;
padding:5px 15px 6px;
position:relative;
text-decoration:none;
text-shadow:0 -1px 1px rgba(0, 0, 0, 0.25);
width:auto;
text-align:center;
}
.button:hover {
background:#111111;
color:#FFFFFF;
}
.button:active {
background:#242424;
}
.orange.button {
background-color:#FF5C00;
}
.orange.button:hover {
background-color:#D45500;
}
.orange.button:active {
background-color:#fd762a;
}
.fail {
background-color: #FFECE6;
border: 1px solid #FF936F;
color: #842100;
background-image: url(delete00.png);
}
.fail {
background-repeat: no-repeat;
background-position: 10px center;
height: 20px;
text-transform: uppercase;
font-size: 11px;
line-height: 22px;
margin-bottom: 20px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 50px;
}
</style>
//form
<a id="various1" href="#inline1" title="">LOG IN</a>
<div style="display: none;">
<div id="inline1" style="width:565px;height:250px;overflow:auto;padding:10px">
<span ><b>Sign In</b></span>
<div id="flash" align="left" ></div>
<div id="status"></div>
<form id="login_form" class="registration" method="post">
<fieldset>
<label>Username </label>
<input class="textboxinput" type="text" id="username" name="username" maxlength="120" value=""/>
<label>Password </label>
<input class="textboxinput" type="password" id="password" name="password"/>
</fieldset>
<fieldset>
<div style="float:right;padding-right:52px;"><input type="submit" class="large button orange input" value="Sign In" /></div>
</fieldset>
</form>
</div>
</div>
//login.php
<?php
$username = $_POST['username'];
$password = $_POST['password'];
if ($username == "test" && $password == "test")
{
echo "<strong>Login succeeded!</strong>";
}
else
{
echo "<div class=\"fail\"><strong>Login failed! Please try again.</strong></div>";
}
?>
Download
http://dl.dropbox.com/u/3293191/JQUERY/login_modal.zip
CSS Login Form Design
