Aspdotnet-Suresh

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

Simple jQuery Modal POPUP Window Example

Mar 30, 2013
Introduction

Here I will show how to implement simple jQuery modalpopup window with example.  Simple jQuery modal popup window or jQuery modal dialog example is used to show alerts messages, notifications, errors and many more with beautiful css styles.

Description:
  
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, Asp.net. Now I will explain how to show simple jQuery modalpopup window with example.

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


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Popup Dialog - Click</title>
<style type="text/css">
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
z-index: 100;
display: none;
}
.content a{
text-decoration: none;
}
.popup{
width: 100%;
margin: 0 auto;
display: none;
position: fixed;
z-index: 101;
}
.content{
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;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type='text/javascript'>
$(function(){
var overlay = $('<div id="overlay"></div>');
$('.close').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});

$('.x').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});

$('.click').click(function(){
overlay.show();
overlay.appendTo(document.body);
$('.popup').show();
return false;
});
});
</script>
</head>
<body>
<div class='popup'>
<div class='content'>
<img src='http://www.developertips.net/demos/popup-dialog/img/x.png' alt='quit' class='x' id='x' />
<p>
Welcome to Aspdotnet-Suresh.com. Please use above search option which was there in top right side to get help with many of articles.
<br/>
<br/>
<a href='' class='close'>Close</a>
</p>
</div>
</div>         
<div id='container'>
<a href='' class='click'><h2><b>Click Here to See Popup! </b></h2></a> <br/>
</div>
</body>
</html>
Demo



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

Get the latest Asp.net, C#.net, 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

24 comments :

N.Shivesh said...

how can i just initiate the modal on page load despite of a link

Anonymous said...

u can do that by
$(window).load(function(){

----your content


})

Anonymous said...

said

Anonymous said...

Hi Suresh,
I am using this popup in an update panel but its working after first click on first click its not working. Plz help

Unknown said...

Very nice....

Anonymous said...

superb

Rakesh singh "Saheb" said...

open popup window when browser popup blocked using ajax,js,jq

Anonymous said...

Thank you , I am just wondering if we can make it dynamic, i mean that the div shows different text every time its run.

Unknown said...

how we can get datepicker on popup any idea?????????

santosh vish said...

Simple jQuery Modal POPUP Window Example not worrking in IE-8

akshitha said...

nice article...thank you

Anonymous said...

Your Model is Not Working In IE. It's Shows Black screen is down And popup not work

Narendran Namachivayam said...

It's working well with IE also, please check with different browser mode by clicking F12 in IE

Narendran Namachivayam said...

Hi Suresh Sir,

I using ur model pop up to open a signup table visible to register user, the thing is due to AutoPostBack="True" in Drop-down list and Radio-button list (am using Drop-down list for security questions loading & using Radio-button list to select user mode) the popup is getting hide , so can't further proceed.

Please do the needful as earliest as possible Sir.

Narendran N

Anonymous said...

hi Sir, its not working in ie6 is there is any solution for that

Unknown said...

Thankew sir...... it helped alot....

Unknown said...

Dear Admin
Thanks for your simple popup. I will not forget your help. I think it's enough for beginner.

Thanks
Rahul Barua

Unknown said...

superb sir

Anonymous said...

It Dosent Work On IE

Unknown said...

Please Provide the Sharepoint2013 All Type App Examples...

Anonymous said...

just put the date-picker into the panel and make it visible true or false according to you

Anonymous said...

Why did you use overlay under style tag. As we don't have any html element with id overlay

3000 said...

can i show another page on this popup window instead of a static text?

Anonymous said...

how can i used this in 2 different web forms

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

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