Custom Modals

Creating a new modal in Backlight 3 is easy, and can be done without diving into Custom Stylesheets or PHPlugins. That’s because Backlight 3 already rocks jQuery and Fancybox on every page (assuming a Pangolin-based template), and so you needn’t add any new dependencies.

To modal, you need just two things: a trigger, and content.

Anywhere in Backlight that accepts HTML, mark it up like this, ensuring the trigger’s href references the contents’ id

<a href="#myModal" data-fancybox>

<div id="myModal" style="display: none;">

… and have a nice day.

1 Like

And for using a button as the trigger, this works:

<button data-fancybox data-src="#myModal">Button</button>
1 Like

Hi Matt,
thank you for this easy thing.
Is there a chance to link directly from Instagram etc. to the content so that it pops up?

Best regards and happy holidays,