Introduction:
Here
I will explain how to open or show jQuery modal popup window on page load with
example or Get jQuery modal
popup box
to appear on page load. Simple jQuery modal
popup
window or jQuery
modal
dialog is used to show alerts messages, notifications, errors and many more
with beautiful css styles.
Description:
In previous posts I explained jQuery Show YouTube video in Popup Window, jQuery simple modal popup window example, Show subscribe modal popup for website, 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 jQuery popup window on page load with example.
In previous posts I explained jQuery Show YouTube video in Popup Window, jQuery simple modal popup window example, Show subscribe modal popup for website, 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 jQuery popup window on page load with example.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Show Popup on Page Load</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<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;
}
.cnt223 a{
text-decoration: none;
}
.popup{
width: 100%;
margin: 0 auto;
display: none;
position: fixed;
z-index: 101;
}
.cnt223{
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;
}
.cnt223 p{
clear: both;
color: #555555;
text-align: justify;
}
.cnt223 p a{
color: #d91900;
font-weight: bold;
}
.cnt223 .x{
float: right;
height: 35px;
left: 22px;
position: relative;
top: -25px;
width: 34px;
}
.cnt223 .x:hover{
cursor: pointer;
}
</style>
<script type='text/javascript'>
$(function(){
var overlay = $('<div
id="overlay"></div>');
overlay.show();
overlay.appendTo(document.body);
$('.popup').show();
$('.close').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
$('.x').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
});
</script>
</head>
<body>
<div class='popup'>
<div class='cnt223'>
<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>
</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
|
|||
26 comments :
Please Upload some YUI 3 examples
Hi suresh,
Thank you for your postings it is very helpful to me . one advise is can you please post some
articles about LINQ it is very helpful to all the members who are following your website ... thank you........ sudheer.....
hi suresh search option is not working properly....
hello suresh i have checked search option is not working properly....
popup not working in ie
nice one
It is helpful...
Sir, i have problem in gridview edit button open
jquery modal dialog with row information and update
these information
Nice post Suresh
I have a problem
when page goes lengthy then popup is not showing
any solution
Can i use this on content page of masterpage. Let say i have master page & i have created one content page of it. Now i want to open on that particular page. How can i do this??? Can u plzz tell me??
ultimate sir proof very helpful to me
its not working sir
thanks it works
hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
it does not work for me
Not Working......
nice post very helpful..
How to use this popup without refreshing master page i,e only once on a page first time load.
Please help me suresh
can i set timer?? or delay my pop up
please also upload that quit button image here so that i can put it in my 'images' folder
thank you
Hi Suresh, if i add a button on pop up page , pop page disappear on click of button , how can we retain popup
It is working. good. But it was reflect all pages. I m using master page asp.net. how to solve this
Thank you so much,
It is really working; thank You
thanks for your post.. i would like to add slider into popup box on page load? could you please guide me or tell me how?
thank you
it is working........
but how to make delay 5 sec......??
Note: Only a member of this blog may post a comment.