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

Show Subscribe Modal PopUp for Website in jQuery While Page Loading

Dec 6, 2012
Introduction
  
Here I will explain how to show automatic popup for the users to subscribe for website when they visit the site first time while page load using
jQuery in asp.net.

Description:
  
In previous posts I explained jQuery Highlight gridview rows on mouseover,
jQuery Change style of controls, Show multiple months in datepicker, and many articles relating to JQuery and modal popup. Now I will explain how to show automatic popup for the users to subscribe for website when they visit the site first time using jQuery in asp.net.

Here we will use Colorbox.js and css files of colorbox lightbox effect  to show popup in website. During page loads we check to see if the cookie exists and hasn’t expired. If it’s expired or doesn’t exist we set the cookie to expire in 15 days, and we show the lightbox for that we need to write the code like this


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Show Popup for your website users to Subscribe using jQuery</title>
<!-- Color Box CSS -->
<link media="screen" rel="stylesheet" target="_blank" href="css/colorbox.css" />
<!-- Style For the Subscription Box -->
<link media="screen" rel="stylesheet" target="_blank" href="css/popup.css" />
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script>
<script language="javascript" src="js/colorbox.js"></script>
<script type="text/javascript">
$("document").ready(function() {
// load the overlay
if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000 * 60 * 60 * 24 * 15;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({ width: "580px", inline: true, href: "#subscribe_popup" });
}
$(".open_popup").colorbox({ width: "580px", inline: true, href: "#subscribe_popup" });
});
</script>

</head>
<body>
<form id="form1" runat="server">
<a href="#" class="open_popup">Click here to open the popup</a>

<!-- This contains the hidden content for inline calls for the subscribe box -->
<div style='display:none'>
<div id='subscribe_popup' style='padding:10px;'>
<h2 class="box-title">Never miss an update from Aspdotnet-Suresh.com</h2>
<h3 class="box-tagline">Get notified about the latest tutorials and downloads.</h3>
<!-- BEGIN #subs-container -->
<div id="subs-container" class="clearfix">
<!-- BEGIN .box-side -->
<div class="box-side left">
<div class="box-icon"><a class="email" target="_blank" href="http://feedburner.google.com/fb/a/mailverify?uri=aspdotnet-suresh"><img src="images/email.png"/></a></div>
<h4><a target="_blank" href="http://feedburner.google.com/fb/a/mailverify?uri=aspdotnet-suresh">Subscribe by Email</a></h4>
<h5>Get alerts directly into your inbox after each post and stay updated.</h5>
<a class="sub" target="_blank" href="http://feedburner.google.com/fb/a/mailverify?uri=aspdotnet-suresh" title="Subscribe Now!">Subscribe</a>
<!-- END .box-side -->
</div>
<div id="box-or">OR</div>
<!-- BEGIN .box-right -->
<div class="box-side right">
<div class="box-icon"><a class="rss" target="_blank" href="http://feeds.feedburner.com/aspdotnet-suresh"><img src="images/rss.png"/></a></div>
<h4><a target="_blank" href="http://feeds.feedburner.com/aspdotnet-suresh">Subscribe by RSS</a></h4>
<h5>Add our RSS to your feedreader to get regular updates from us.</h5>
<a class="sub" target="_blank" href="http://feeds.feedburner.com/aspdotnet-suresh" title="Subscribe Now!">Subscribe</a>
<!-- END .box-side -->
</div>
<!-- BEGIN #subs-container -->
</div>
</div>
</div>
<!-- END subscribe popup-->
</form>
</body>
</html>
If you observe above code in header section I added “colorbox.js, colorbox.css, popup.css by using this plugin and css files we can show modal popup in website you can get those files by downloading attached sample or you can get it from this site jQuery show subscription popup.

Demo

Download Sample Attached


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

12 comments :

Anonymous said...

yoy r really rocking with code. this site is very useful for me

Ts said...

What is the best Windows OS ?
currently i am using Win XP Service Pack 3
Applications/software are: DotNet 2010, PhotShop, DreamWeaver, Flash, MS Office and general entertainment tools...

I need to upgrade my OS, which is the best one and it should allow us to upgrade the software version like dotnet...

expecting your valuable reply.

Anonymous said...

Accordin to my point of view windows 7 ultimate is best because it contains all features like networking.

Anonymous said...

its very nice code help lot thanks keep it up

shanti said...

hi this code very help full...... thank you...

Anonymous said...

Suresh u are greate...
you have explain very nice example,
it's vry helpfull to all developer...
nice man...

Satyam Shukla said...

suresh sir i am using this modal popup but asp:image button not working please help me soon.................

Anonymous said...

code behind of image button not working

Anonymous said...

Hi Suresh, I am facing problem using asp:imagebutton inside the modal popup, it is not firing. I have edited the colorbox.js file and then the asp:imagebutton start firing, but every time it is fired, the modal popup goes closed (using RegisterStartupScript from code behind also didnt worked).. please suggest me a way out.... Thank you..


Subhadeep

Anonymous said...

hello i am facing this prob code behind of image button not working please reply what i am doing

Unknown said...
This comment has been removed by the author.
Unknown said...


such a good website and given to more information thanks! and more visit
sas online training

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.