How to Create Popups with Fancybox, jQuery Cookie, and Twitter Bootstrap

jquery-cookie-fancybox-bootstrap

In this short little tutorial I’m going to show you how to easily create and implement popups that will help you drive awareness, gather emails, and all kinds of other things that popups are used for without having to purchase something like OptInMonster.

Download and Include

Directions

Take a Look at the gist below. We have the popup HTML swiftly followed by the popup JS. You can cut and paste this code into you template once you’ve implemented the required scripts, but it won’t work until you replace the values in the double brackets -> {{ }}.

Line 1:

On the first line we have a hidden link that links to “#popup” which will be used later in a script to open the fancybox. You can ignore this for now…

Lines 3-22:

This is our popup with a picture on the left and a title / from on the right. Here is an example of what it looks like when implemented and opened in the fancybox. The id of this div is #popup which is the anchor used in the link on line 1. Notice that this div uses Twitter Bootstrap for the grid, and is hidden initially.
Screen Shot 2016-01-19 at 5.16.49 PM

Line 24-53:

This is our script for opening the fancybox. What happens here is that:

  1. Line 29: We check to see the width of the screen. If it’s under 992px we don’t implement the popup (personal preference). You can take this out if you want, but popups are really annoying on mobile.
  2. Line 32: Next we have an if statement to see if the the popup we have implemented has already been opened. We achieve this by checking a cookie value “popup1”. If it is “viewed” we don’t open the popup.
  3. Line 34: If the “popup1” cookie is empty we then initiate a js timeout function to fire after 30 seconds.
  4. Line 35: After 30 seconds we use the FancyBox api open method to target the “#popup-up” link that we have on line one. That opens the popup div. After that we use the afterClose parameter to set the “popup1” cookie value to “viewed”.
  5. Lines 40 -46: These lines repeat the process in the lines above, but for a popup that is supposed to open after 10 minutes!
  6. That’s it!

Conclusion

That’s pretty much it. If you want to add other popups, or popups that open after various amounts of time it’s pretty easy to hack the code! Enjoy.

Questions below!