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

16 comments :

Anonymous said...

Please Upload some YUI 3 examples

Naga Sudheer 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

salman kaludi said...

its not working sir

Charles Okonkwo said...

thanks it works

Anonymous said...

hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii

Anonymous said...

it does not work for me

Anonymous said...

Not Working......

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.