Recently I have seen many blogs using a modal window subscribe box on page load and one such modal subscription box inspired me to create this tutorial. In order to achieve the modal window. The reason why I use Colorbox is due to its browser compatibility and it offers various other options that can be used in it. So let me put across what I have used to create this simple popup/modal subscribe box
ColorBox
jQuery cookie tracking
CSS to brush up its look
Basically the subscribe which I made has two option for your reader to choose between email subscription and RSS feed.
HTML Lets make a simple page to easily understand how this works
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>Modal / Popup Subscription Box</title>
<script src="js/jquery.colorbox-min.js"></script>
</head>
<body>
.
.
.
<html>
Now the above code has all the texts and contents that are used in the modal subscribe box. If you wish to change the texts and the feedburner ID, you can change it.
CSS
In order to style up the subscribe box we are using CSS and at some place you can see some CSS3 effects. The images used in the CSS are inside the download folder. So while you try this, make sure that your have included the exact image path.
In the downloadable folder you can see two CSS files. Once is for the colorbox and the other for styling up the elements in the subscribe box. Since we don’t you confuse, we kept it as two.
pop.css
#subscribe {
font: 12px/1.2 Arial,Helvetica,san-serif;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
text-decoration:none;
}
.
.
.
Script.js
The final step is to initialize the modal window on page load and that too should open only on the first page load based on the cookies stored. This is quite helpful for bloggers to actually display the subscribe box just once for an individual visitors
jQuery(document).ready(function(){
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:"480px", inline:true, href:"#subscribe"});
}
});
Download these Scripts Click Here
ColorBox
jQuery cookie tracking
CSS to brush up its look
Basically the subscribe which I made has two option for your reader to choose between email subscription and RSS feed.
HTML Lets make a simple page to easily understand how this works
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>Modal / Popup Subscription Box</title>
<script src="js/jquery.colorbox-min.js"></script>
</head>
<body>
.
.
.
<html>
Now the above code has all the texts and contents that are used in the modal subscribe box. If you wish to change the texts and the feedburner ID, you can change it.
CSS
In order to style up the subscribe box we are using CSS and at some place you can see some CSS3 effects. The images used in the CSS are inside the download folder. So while you try this, make sure that your have included the exact image path.
In the downloadable folder you can see two CSS files. Once is for the colorbox and the other for styling up the elements in the subscribe box. Since we don’t you confuse, we kept it as two.
pop.css
#subscribe {
font: 12px/1.2 Arial,Helvetica,san-serif;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
text-decoration:none;
}
.
.
.
Script.js
The final step is to initialize the modal window on page load and that too should open only on the first page load based on the cookies stored. This is quite helpful for bloggers to actually display the subscribe box just once for an individual visitors
jQuery(document).ready(function(){
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:"480px", inline:true, href:"#subscribe"});
}
});
Download these Scripts Click Here
No comments:
Post a Comment