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

Open Show jQuery Modal POPUP Window on Page Load with Example

Mar 31, 2013
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.


To show jQuery popup window on page load we need to write the code as shown below


<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 RSS subscribe by email Subscribe by Email

26 comments :

Anonymous said...

Please Upload some YUI 3 examples

nagasudheers said...

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

Anonymous said...

hi suresh search option is not working properly....

vikas said...

hello suresh i have checked search option is not working properly....

Anonymous said...

popup not working in ie

Anonymous said...

nice one

Kaushik Bhatt said...

It is helpful...

Sir, i have problem in gridview edit button open
jquery modal dialog with row information and update
these information

kasarla shanthan said...

Nice post Suresh

Anonymous said...

I have a problem
when page goes lengthy then popup is not showing

any solution

Nirav Desai said...

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??

Er. Saurabh Kashyap said...

ultimate sir proof very helpful to me

Unknown said...

its not working sir

Anonymous said...

thanks it works

Anonymous said...

hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii

Anonymous said...

it does not work for me

Anonymous said...

Not Working......

Anonymous said...

nice post very helpful..

Anonymous said...

How to use this popup without refreshing master page i,e only once on a page first time load.
Please help me suresh

Anonymous said...

can i set timer?? or delay my pop up

Anonymous said...

please also upload that quit button image here so that i can put it in my 'images' folder

Unknown said...

thank you

Unknown said...

Hi Suresh, if i add a button on pop up page , pop page disappear on click of button , how can we retain popup

C. Selvakumar said...

It is working. good. But it was reflect all pages. I m using master page asp.net. how to solve this

Anonymous said...

Thank you so much,

It is really working; thank You

Habib said...

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?

Unknown said...

thank you
it is working........
but how to make delay 5 sec......??

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.