Create a modal box jquery ajax php mysql
This is a code tutorial how to create a modal box using jquery and jquery ajax and php mysql login form
Javascript code
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>
$(document).ready(function() {
//select all the a tag with name equal to modal
$('a[name=modal]').click(function(e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href');
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH/3-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
});
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mask').hide();
$('.window').hide();
});
//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
//jquery ajax
$("#login_form").submit(function() {
var unameval = $("#username").val();
var pwordval = $("#password").val();
$("#flash").show();
$("#flash").fadeIn("slow",0.25).html('<img src="ajax-loading.gif" align="absmiddle"> <span class="loading">Loading...</span>');
$.post("login.php", { username: unameval,
password: pwordval }, function(data) {
$("#status").html(data);
});
$("#flash").hide();
return false;
});
});
</script>
CSS Code
<style>
#mask {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#969393;
display:none;
}
.window {
position:absolute;
left:0;
top:0;
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}
.note-box {
width:300px;
height:260px;
color:#818181;
background: #FFFFFF;
border: 2px solid #ccc;
padding:10px;
font-family: Georgia;
font-size: 14px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
h1{font-weight:normal;font-size:20px;color:#aaaaaa;margin:0 0 4px 0;}
p{font-size: 20px;color: #000000;}
a {color:#729e01;text-decoration:none;}
a:hover{color:#dedede;}
input.text{ border:#ccc 1px solid;-moz-border-radius:7px; -webkit-border-radius:7px;font-size: 20px;width:300px;padding-left:5px;}
.highlight-1, .highlight-2, .highlight-3 { font-size: 14px;color: #000000; -moz-border-radius : 4px; -webkit-border-radius : 4px; padding : 5px 10px;}
.highlight-1 { background : #fce9e9;border : 1px #eac7c7 solid; }
.highlight-2 {background : #fcfae9;border : 1px #e9e6c7 solid; }
.highlight-3 {background : #edfce9;border : 1px #cceac4 solid;}
.ptour_crtbtn{border:1px outset #ccc;padding:5px 2px 4px;color:#fff;min-width: 100px;text-align: center;cursor:pointer;background:#729e01;background:-webkit-gradient(linear, left top, left bottom,from(#a3d030),to(#729e01));background:-moz-linear-gradient(top,#a3d030,#729e01);background:-o-linear-gradient(top,#a3d030,#729e01);background:linear-gradient(top,#a3d030,#729e01);-moz-border-radius:7px; -webkit-border-radius:7px;
}
.fail {
background-color: #FFECE6;
border: 1px solid #FF936F;
color: #842100;
background-image: url(delete00.png);
background-repeat: no-repeat;
padding:5px;
padding-left:30px;
}
</style>
HTML Code
<div style="text-align:center"><a href="#modalboxlogin" name="modal"><h1>Click here to open modal login form</h1></a></div>
<div id="modalboxlogin" class="window note-box">
<div id="flash" align="left" ></div>
<div id="status"></div>
<form id="login_form" action="" method="POST">
<p><label style="display: block;">Email:</label><input class="text" type="text" id="username" name="username" /></p>
<p><label style="display: block;">Password:</label><input class="text" type="password" id="password" name="password" /></p>
<p style="text-align:right"><button class="ptour_crtbtn" name="login" type="submit">Login</button></p>
</form>
<p style="text-align:right"><a href="#" class="close"><img src="closelabel.gif"/></a></p>
</div>
<!-- Mask to cover the whole screen -->
<div id="mask"></div>
login.php code
<?php
$mysql_host = 'localhost';
$mysql_username = 'root';
$mysql_password = 'ednalan';
#connect to the database
mysql_connect("$mysql_host","$mysql_username","$mysql_password");
mysql_select_db("dbednalan");
#A function to secure SQL queries in the script.
function sql_secure($string) {
if (get_magic_quotes_gpc()) {
$string = stripslashes($string);
}
$string = mysql_real_escape_string($string);
return $string;
}
$username = sql_secure($_POST['username']);
$password = sql_secure($_POST['password']);
#check details are of required lenght.
if (strlen($password) <= 3 || strlen($username) <= 3)
{
//echo "Username or Password Must Be Over 3 Characters";
}
$sql = "SELECT * FROM users WHERE username = '$username' AND password = '$password'";
$query = mysql_query($sql);
$num_rows = mysql_num_rows($query);
#if user exists set some cookies.
if ($num_rows == '1'){
page_redirect("http://r-ednalan.blogspot.com/");
}else {
echo "<div class=\"fail\">Login failed, Please try again</div>";
}
?>
Download
http://dl.dropbox.com/u/7106563/r-ednalan/modalboxlogin_jquery-php-mysql.zip
Simple jquery Demonstration show hide Toggle slide fade
