Now, final retouch, have css file, jq-fixed.js in inside the same directory and save the code below as modal.html too in the same directory, test the mdoal window by running modal.html. If everything goes fine you’ll be able to see the modal window at the top.

You can also download the zipped version of this tutorial, will do it soon. (Having problem with my uploads, webserver problem).

modal.html

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<link rel=”stylesheet” type=”text/css” href=”modalcss.css” />
<script type=”text/javascript” src=”jquery-latest.pack.js”></script>
<script type=”text/javasript” src=”jq-fixed.js”></script>
</script>
<title>JQuery Demo Page</title>
</head>
<body>
<div id=”boxes”>
<div id=”dialog”></div>
<div id=”mask”></div>
</div>
</body>
</html>

Your feedback will help me to write more and more smooth tutorials.