Use your left/right keys to browse tutorials
Automatic jQuery site subscription lightbox

Automatic jQuery site subscription lightbox

1 Star2 Stars3 Stars4 Stars5 Stars
Posted on May 17, 2012

I’ve had many of you email me asking for a tutorial that shows how to create the subscription lightbox that activates for the first time you visit the site, and I’ve finally got around to writing it up.

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" />
<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>

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 -->
<div style='display:none'>
  <div id='subscribe_popup' style='padding:10px;'>
    <h2 class="box-title">Never miss an update from Papermashup</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=AshleyFord-Papermashupcom&loc=en_US"><img src="images/email.png"/></a></div>
        <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>
      <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://feeds2.feedburner.com/AshleyFord-Papermashupcom"><img src="images/rss.png"/></a></div>
        <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-->

download



More tutorials from Papermashup
Comments
25 discussions around Automatic jQuery site subscription lightbox
Newer Comments
  1. busayo says:

    Great piece here! you made my day with this. Thanks GBU!

  2. Jeffrey says:

    This is a horrible user experience. Every time I visit a new page on your site I get the popup. If I didn’t care about it the first time, I don’t want to see it every time I go to a new page on your site. You should be using it more intelligently . If a user saw it once, there is no need to have to see it again and again and again and again and again.

  3. paul says:

    Thank you for the script! How can I modify the script to popup regardless of cookies. I want a popup every time the visitor comes to the site even if they’ve seen the popup previously within the last 15 days.

    Thanks in Advance,
    Paul

  4. Pingback: Otomatik Açılan Takip Et Popup | Web Düşkünü - Güncel Webmaster Blogu

  5. Pingback: Otomatik Açılan Takip Et Popup | Web Düşkünü - Güncel Webmaster Blogu

  6. PC says:

    Hi, I am trying to make some adjusts to this script and I have some questions, maybe you can help me.

    I would like to add a second JavaScript when i close the box, I am trying to implement a video player (JW player) and even if I close the box, the sound still coming out because the player still “playing” the video. In order to close the player I have to run the following command:
    jwplayer(‘mediaplayer’).remove();

    how can I add this to the close button???

    thanks again

    PC

  7. gotcha5832 says:

    Thanks a lot.

    And if you woulid like, that box doesn’t show for google bot?

  8. kimo says:

    Thanks for this tutorial :)

  9. Its always advisable to have a subscription form right in the lightbox – saves an extra step for the user and reduces fall outs.

Newer Comments




Never miss an update from Papermashup

Get notified about the latest tutorials and downloads.

Subscribe by Email

Get alerts directly into your inbox after each post and stay updated.
Subscribe
OR

Subscribe by RSS

Add our RSS to your feedreader to get regular updates from us.
Subscribe

Get in contact

Please use the form below to get in contact. If your question is related to a free script download, please use the comments on the article page as community members are more likely to respond quicker than I can personally.

About Me

I'm Ashley Ford, Co-founder and Technical Director at Harkable.com London, UK. Previously I worked at InMobi, Spotify and MySpace. My interests include photography and making short videos I'm also an avid F1 fan. I'm always working on side projects. Here are a few: Easy Poll, We Deliver.



What do you specialise in?

I spend a lot of time coding in PHP and MySQL, as well as front end XHTML and CSS. I also specialise in javascript and the jQuery framework as well as being an avid designer. You can find me on dribbble

Interested in advertising?

If you'd like to advertise on Papermashup.com please get in touch via the contact link below for advertising opportunities.

How do I contact you

You can contact me here. and I'm available for consultation, freelance, programming book reviews.

Get on the mailing list

Join over 3000 people who have subscribed to the Papermashup inbox message, and be the first to find out about tutorial, competitions and giveaways.