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.
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.
<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 Email
|
|||
24 comments :
how can i just initiate the modal on page load despite of a link
u can do that by
$(window).load(function(){
----your content
})
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
Very nice....
superb
open popup window when browser popup blocked using ajax,js,jq
Thank you , I am just wondering if we can make it dynamic, i mean that the div shows different text every time its run.
how we can get datepicker on popup any idea?????????
Simple jQuery Modal POPUP Window Example not worrking in IE-8
nice article...thank you
Your Model is Not Working In IE. It's Shows Black screen is down And popup not work
It's working well with IE also, please check with different browser mode by clicking F12 in IE
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
hi Sir, its not working in ie6 is there is any solution for that
Thankew sir...... it helped alot....
Dear Admin
Thanks for your simple popup. I will not forget your help. I think it's enough for beginner.
Thanks
Rahul Barua
superb sir
It Dosent Work On IE
Please Provide the Sharepoint2013 All Type App Examples...
just put the date-picker into the panel and make it visible true or false according to you
Why did you use overlay under style tag. As we don't have any html element with id overlay
can i show another page on this popup window instead of a static text?
how can i used this in 2 different web forms
Note: Only a member of this blog may post a comment.