A simple and easy JQuery Popup window, jQuery model box

A simple and easy jQuery Popup window

Nowadays, websites are more and more rich and interactive and users are becoming more and more critical with all things in websites.

Note: I have added Demo and Download options,

Using windows popup to indicate important information in the air.

We are going to learn How to create a simple and easy window popup from the scratch using jQuery in a simple and clean tutorial, the first one of this new blog.

We need to have a basic knowledge about JQuery, HTML and CSS

We can create this with following HTML code, It is very simple code that can be embedded before closing body tag
and after all tags.

We have to take tow dividers for this. One is for total background and another one is for Popup window
We give 100% width and 100% height to the first divider
First note down the HTML code.

(this is an example for a form in the popup window, but you put every HTML elements in it)

<div id="popupContact" style="top:378.5px">

 <a id="popupContactClose" title="close">x</a>
 <h1>FeedBack</h1>
 Fields marked with a

 * are required.<br/>
 </span><br/>

 <tbody><tr>
 <tr>
 <td>Your Name *: </td>

 <td><input class="all"name="Name"size="25"type="text"id="name"></td>
 </tr>
 <tr>
 <td>Your Email *: </td>
 <td><input class="all"name="Email"size="25"type="text"id="email"></td>
 </tr>
 <tr>
 <td> Company :</td>

 <td><input name="company"class="all"size="25"type="text"id="company"></td>
 </tr>
 <tr>
 <td>Phone Number:</td>
 <td><input name="Phone"class="all"size="25"type="text"id="phone"></td>
 </tr>

 <tr>
 <td>Your Message *:</td>

 <td><textarea cols="26"class="all"name="Message"rows="2"id="message"></textarea></td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>
 <input name="submit"value=" Submit "class="button"type="submit"id="submit"></td>
 </tr>

 </tbody>
 </table>
 </div>
</div>
<div id="backgroundPopup"></div>

Clicking any link make it block

Css is also very important to align and set the popup window in the center. first we put display none then after

Here is the CSS code

mobile casino 0% #fafafa; padding: 10px;”>

/*pop up*/
#backgroundPopup{
display:none;
position:fixed;
_position:fixed /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
cursor:wait;
background:#000000;
border:1px solid #cecece;
z-index:103;
}
#popupContact{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
width:380px;
background:#FFFFFF;
border-radius:5px;
z-index:104;
padding:10px;
font-size:13px;
}
#popupContact td{
}
#popupContactClose{
font-size:14px;
line-height:14px;
right:6px;
cursor:pointer;
top:4px;
position:absolute;
color:#6fa5fd;
font-weight:700;
display:block;
}

Writing JQuery is very simple, You need to download one small file to work with it

Download from the link popup.js

Here is the JQuery code

<scripttype="text/javascript"src=" http://code.jquery.com/jquery-1.7.2.min.js "></script>

<!-- following popup.js can be downloaded from above link -->
<scripttype="text/javascript"src="js/popup.js"></script>

<scripttype="text/javascript">
$(document).ready( function(){
$("#button").click(function(){
//centering with css
centerPopup();
//load popup
loadPopup();
});
$("#popupContactClose").click(function(){
disablePopup();
});
});
</script>

Download contains two types of popups: