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.
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.
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 Email
|
|||
12 comments :
yoy r really rocking with code. this site is very useful for me
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.
Accordin to my point of view windows 7 ultimate is best because it contains all features like networking.
its very nice code help lot thanks keep it up
hi this code very help full...... thank you...
Suresh u are greate...
you have explain very nice example,
it's vry helpfull to all developer...
nice man...
suresh sir i am using this modal popup but asp:image button not working please help me soon.................
code behind of image button not working
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
hello i am facing this prob code behind of image button not working please reply what i am doing
such a good website and given to more information thanks! and more visit
sas online training
Note: Only a member of this blog may post a comment.