Implement a jQuery AJAX Login Form into a Modal Box using fancybox.net modal

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