aspdotnet-suresh offers articles and tutorials,csharp dot net, articles and tutorials,VB.NET Articles,Gridview articles,code examples of 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Build (Create) a Popup Modal Window using jQuery Example

May 3, 2015

Here I will explain how to create or build jQuery modal popup window with example. create modal popup window using jQuery  or jQuery modal popup window or dialog example to show alerts messages, notifications, errors and many more with beautiful css styles.

In previous posts I explained Show subscribe modal popup for website,
Ajax confirmation box with modalpopup, Open/Close Ajax ModalPopUpExtender using JavaScript, Ajax modalpopup example to edit gridview rows and many articles relating to jQuery, Now I will explain how to build simple jQuery modal popup window with example.

To implement simple modalpopup using jQuery we need to write the code as shown below

<html xmlns="">
<title>jQuery Popup Dialog - Click</title>
<style type="text/css">
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
-khtml-opacity: 0.7;
opacity: 0.7;
z-index: 100;
display: none;
.content a{
text-decoration: none;
width: 100%;
margin: 0 auto;
display: none;
position: fixed;
z-index: 101;
min-width: 600px;
width: 600px;
min-height: 150px;
margin: 100px auto;
background: #f3f3f3;
position: relative;
z-index: 103;
padding: 10px;
border-radius: 5px;
box-shadow: 0 2px 5px #000;
.content p{
clear: both;
color: #555555;
text-align: justify;
.content p a{
color: #d91900;
font-weight: bold;
.content .x{
float: right;
height: 35px;
left: 22px;
position: relative;
top: -25px;
width: 34px;
.content .x:hover{
cursor: pointer;
<script type="text/javascript" src=""></script>
<script type='text/javascript'>
var overlay = $('<div id="overlay"></div>');
return false;

return false;

return false;
<div class='popup'>
<div class='content'>
<img src='' alt='quit' class='x' id='x' />
Welcome to Please use above search option which was there in top right side to get help with many of articles.
<a href='' class='close'>Close</a>
<div id='container'>
<a href='' class='click'><h2><b>Click Here to See Popup! </b></h2></a> <br/>

Build (Create) a Popup Modal Window using jQuery Example

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest,, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email


Give your Valuable Comments

Other Related Posts

© 2015 All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.