Automatic jQuery site subscription lightbox

Sharing is caring!

Getting Started

You’ll need to include the jQuery library as well as the Colorbox lightbox JS and CSS which are included in the download below.
<!– 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” />
http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js
http://js/colorbox.js
The JS Code

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

$(“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”});

});

The HTML

Here’s the HTML for the lightbox. This can go anywhere on your page, although i’d recommend putting it just above the last body tag. There shouldn’t be any surprises here!

<a href=”#” class=”open_popup”>Click here to open the popup</a>

<!– This contains the hidden content for inline calls for the subscribe box –>

Never miss an update from Papermashup

Get notified about the latest tutorials and downloads.

<h4><a target=”_blank” href=”http://feedburner.google.com/fb/a/mailverify?uri=AshleyFord-Papermashupcom&loc=en_US”>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=AshleyFord-Papermashupcom&loc=en_US” title=”Subscribe Now!”>Subscribe</a>
<!– END .box-side –>
</div>

OR

<!– BEGIN .box-right –>

<h4><a target=”_blank” href=”http://feeds2.feedburner.com/AshleyFord-Papermashupcom”>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://feeds2.feedburner.com/AshleyFord-Papermashupcom” title=”Subscribe Now!”>Subscribe</a>
<!– END .box-side –>
</div>
<!– BEGIN #subs-container –>
</div>
</div>
</div>
<!– END subscribe popup–>