Custom Modals

Matthew · June 10, 2020, 12:50am

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>
  Trigger
</a>

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

… and have a nice day.

rod_barbee · June 10, 2020, 1:12pm

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

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

volvoxturbo · December 26, 2020, 5:42pm

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,
Oliver