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

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

20 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

THILLAI RAJA said...

Very nice....

Anonymous said...

superb

rakesh singh 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.

Sushant Naik 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

n narendran said...

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

n narendran 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

Sanjeev Bangwal said...

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

Rahul Barua said...

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

Thanks
Rahul Barua

jay cpp said...

superb sir

Anonymous said...

It Dosent Work On IE

srikanth sp said...

Please Provide the Sharepoint2013 All Type App Examples...

Give your Valuable Comments

Other Related Posts

© 2010-2012 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.