Creating and Styling Backlight Popup boxes

Backlight popup boxes are useful critters. Your visitor clicks on a button and your box appears with whatever you’ve placed in it. You can use them to promote an event, show licensing or booking information, host a mailing list sign up form, and more. And TTG has made these pretty easy to implement.

The html for the Backlight popup box goes directly into the page that the button appears on. But it’s initially hidden with css. When a visitor clicks on the popup button, the popup box appears with default TTG styling.

Let’s start with the button. Here’s the code for the button:

<button data-fancybox data-src="#popup">Button</button>

The button is a block level item and will appear on its own line.

An alternative is an inline link that will look like any text link on your page. This code comes from Daniel Leu, fellow TTG forum moderator.

<a data-fancybox data-src="#popup" href="javascript:;">popup</a>

And here’s the code for a basic popup box:

<div id="popup" style="display:none;"><p> Stuff and things ... </p><p>Sed maximus enim felis, et interdum risus vehicula vel. Mauris vitae ligula vulputate, facilisis odio eget, accumsan lacus. <a href="#">Pellentesque suscipit</a> ante leo, sed consectetur magna aliquet at. Fusce	consectetur ullamcorper rhoncus. Fusce ac aliquam nisl. Vestibulum ac congue lorem.</p></div>

You can put any html you wish in here; you’ll notice that I’ve added a text link to code above.

Place the code for the button in the page copy where you want the button to appear. Place the pop-up code anywhere in the page copy.

Initially, the Backlight popup box looks rather plain.

But it’s easy to style using custom classes as well as the #popup selector.

For example, let’s style a heading element that will act as a title for the popup box. Simply start with a heading in the popup html and give it the class “popup-title”:

<div id="popup" style="display:none;"><h2 class="popup-title">Stuff and things ... </h2>
<p>The rest of your text.</p></div>

In your custom css, add some styling:

h2.popup-title {
	background: #333333;
	background: linear-gradient(#333333, #777777);
	padding: 12px;
	color: white;
}

This is a good start but it looks a little awkward.

Let’s fix this so it looks a bit better. Using the browser’s inspector I can see the selectors being used and I can change property values to see the results without needing to actually apply the changes yet.

My goal is to move the “title bar” I’ve created to the top of the box and to make it span the length. The inspector shows me that there is quite a bit of padding applied to the #popup div. So I’ll change that by targeting the #popup selector:

#popup {
	padding-top:0;
	padding-left:0;
	padding-right: 0;	
}

That accomplishes the goal, but this removal of padding affects the paragraph text and pushes it up against the edges of the box.

A bit tight at the edges!

I also don’t like that the box spans the width of the browser. So I’m going to add left and right-margin to paragraph tags (p tags inside the #popup div) and change the width of the box. I also don’t want the box to be too small on mobile devices so I’m putting the styling that controls the width inside of a media query. This way, the narrower popup box css will be applied only to devices/browsers that are at least 1025px wide.

#popup p {
	margin-left: 12px;
	margin-right: 12px;
}

@media screen and ( min-width: 1025px ) {
	#popup {
		max-width: 50%;
	}
}

And here is the final result.

A nice and tidy popup box!

Beyond this, you could also style the page overlay that appears behind the box. You can do that by modifying the css below for opacity, color and the transition timing. Just add this code to your custom css and make any desired changes.

/*Change overlay opacity and transition timing. The .type-page class will restrict theses effects to pages only. Otherwise this css would affect the background color of album large images when using the slide show presentation. */

.type-page .fancybox-is-open .fancybox-bg {
    opacity: .87;
    transition-timing-function: cubic-bezier(.22,.61,.36,1);
}
/*Change overlay background color */
.type-page .fancybox-bg {
    background: #1e1e1e;
	}

I’ve included the .type-page class so that only pages will be targeted and not the large image backgrounds in albums when using the Slideshow large image presentation.

See the demo page here.

1 thought on “Creating and Styling Backlight Popup boxes”

Leave a Reply

Your email address will not be published. Required fields are marked *

About this site

This site is: a repository of time-savers and best practices from a user's perspective, picked up from several years of using TTG plugins.
This site is not: a support site.
Read more here.

Tip Jar

If this site has saved you some time, kept your hair attached, or otherwise prevented you from tossing the mouse through the monitor, feel free to donate.

Categories


Highly recommended. This is my go-to Lightroom book. Click on the book image. (affiliate link)

Affiliate link!

Current TTG versions

Backlight Versions

Backlight 1.2.1
Pages module 1.2.1
Cart Add-on 4.1.1
Client Response Add-on 7.1.1
Theater Add-on 1.2.1
WordPress Add-on 1.2.1

CE4 Versions

TTG-BE: 2.0.5a
Autoindex: 7.0.8
Cart: 3.1.4a
CRG: 6.1.3a
Gallery: 6.1.9
Pages: 7.0.15
Publisher: 2.3.3
Stage: 6.1.6
Theme for WordPress: 3.1.2

Subscribe to new posts