Fancybox Pop-ups

Here I am, testing a pop-up box.

Here's the basic code I'm using:

For the button

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

And if you want to have an inline link instead of a button, use this (thanks to Daniel Leu for this)

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

...and for the actual pop-up 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>

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

Further on this, you can target the popup box with custom css using the selector #popup, which I'm also doing here. I've styled the h2 heading item giving it the class "popup-title". Using this class I've added a gradient background and changed the h2 element color to white.
I've also changed the default styling of the popup box to allow the h2 title area to be at the top of the popup box, to give the paragraph text some breathing room on the left and right (which I had to do when removing the overall padding of the box) I've added left and right margin.
I've also reduced the width of the pop-up box to 50% for desktop browsers. For any browser or device with a width of 1024px or smaller, the popup box will have 100% width.
And if you're really ambitious and want to change the popup background overlay, here's the css that controls that. Just drop this into your custom css file and change as needed:

/*Change overlay opacity and transition timing. The .type-page class will restrict this effect to pages only. Otherwise this css would affect the background color of the 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 got more on using and styling pop up boxes on my TTG Tips site in this post.