A very Simple jQuery Popup ready to use Code!

I have written a very simple jQuery popup that you can use it right away.  Very simple code, if you know jQuery a little you can understand the code easily.  This script contains only 20 lines of code if you remove the comments and spaces!. Tested in all major Browser, Working Perfectly!

You can download the script at the bottom of the page!

 

1. See the javascript part here:


<script type="text/javascript">

$(document).ready(function(){
//open popup
$("#pop").click(function(){
$("#overlay_form").fadeIn(1000);
positionPopup();
});

//close popup
$("#close").click(function(){
$("#overlay_form").fadeOut(500);
});
});

//position the popup at the center of the page
function positionPopup(){
if(!$("#overlay_form").is(':visible')){
return;
}
$("#overlay_form").css({
left: ($(window).width() - $('#overlay_form').width()) / 2,
top: ($(window).width() - $('#overlay_form').width()) / 7,
position:'absolute'
});
}

//maintain the popup at center of the page when browser resized
$(window).bind('resize',positionPopup);

</script>

All are commented so need to explain the code i think!!.

 

2. Styles used:


<style>
#overlay_form{
position: absolute;
border: 5px solid gray;
padding: 10px;
background: white;
width: 270px;
height: 190px;
}
#pop{
display: block;
border: 1px solid gray;
width: 65px;
text-align: center;
padding: 6px;
border-radius: 5px;
text-decoration: none;
margin: 0 auto;
}
</style>

 

3. HTML Part:


<a href="#" id="pop" >PopUp</a>
<br />
<form id="overlay_form" style="display:none">
<h2> Put your contents here..</h2>
<label>Username: </label><input type="text" name="username" /><br /><br />
<label>Password: </label><input type="text" name="password" /><br /><br />
<input type="button" value="Login" />
<a href="#" id="close" >Close</a>
</form>

 

You can see the demo and if you wish to download you can do it here!

Download   Demo

Also check the Demo of Popup with Background Overlay here:

Demo

67 Comments

Add a Comment

Your email address will not be published. Required fields are marked *