Magnific Popup | Cynosure Design System

Overview

Magnific Popup (v1.2.0) is the lightbox library for the Cynosure Design System. It handles inline modals, gated brochure downloads with Pardot/Gravity Forms, video embeds, and map overlays.

Popup types

Trigger class	Type	Used for
`.js-open-content-popup`	Inline modal	Generic inline popup; `href` points to a hidden `#popup-id` element
`.eb-js-showcase-slider`	Inline (delegated)	Product showcase slider; popup triggered on child `.js-open-content-popup` elements
`.js-open-content-popup-brochure`	Inline with callback	Brochure download gate; injects Pardot iframe `src` from `data-pardot-url`
`.js-open-content-popup-asset`	Inline with callback	Asset download gate; injects Pardot iframe into `#download-paper-popup`
`.js-open-content-popup-asset-gf`	Inline with AJAX	Asset with Gravity Form; fetches form HTML via `CYNO_DATA.ajax_url`
`.js-popup-map`	Inline with DOM move	Moves `#gmap` into `#gmap-popup` on open; restores on close
`.js-open-video`	iFrame	YouTube/Vimeo video; URL taken from `href`
`.js-open-wistia-video-popup`	iFrame (Wistia)	Wistia video embed; URL pattern matched for `wistia.com/medias/{id}`

Importing the utility

JavaScript

/**
 * Download Block
 *
 * Gated brochure and asset downloads with Pardot form popups.
 *
 * @shared popup
 *   Trigger: .js-open-content-popup-brochure — brochure popup with Pardot iframe
 *   Trigger: .js-open-content-popup-asset   — asset popup with Pardot iframe
 *   Library: Magnific Popup 1.2.0 + jQuery
 *
 * @see /guidelines/javascript/popup
 * @see /guidelines/javascript/shared-utilities
 */
import '../../js/components/popup.js';

Inline popup template

The popup content is an element already in the DOM, hidden with display: none. The trigger's href points to its id:

Handlebars

{{!-- Trigger link --}}
<a href="#brochure-popup" class="js-open-content-popup btn btn-primary"
   data-pardot-url="{{properties.pardot_url}}"
   data-modal-title="{{properties.popup_title}}"
   data-modal-description="{{properties.popup_description}}"
   data-modal-thumb="{{properties.popup_image.url}}">
  Download Brochure
</a>

{{!-- Hidden popup container (place at block root level) --}}
<div id="brochure-popup" class="c-popup mfp-hide">
  <div class="c-popup__content">
    <h2><span></span></h2>
    <p></p>
  </div>
  <div class="c-paper__pic">
    <img src="" alt="">
  </div>
  <div class="c-popup__iframe">
    <iframe id="modal-pardot-iframe" src="" frameborder="0"></iframe>
  </div>
</div>

The popup.js utility injects data-pardot-url, data-modal-title, data-modal-description, and data-modal-thumb values into the popup DOM on open, and clears them on close.

Video popup template

Handlebars

<a href="{{properties.video_url}}" class="js-open-video btn btn-primary">
  Watch Video
</a>

No popup container is needed — Magnific Popup creates the iframe dynamically from the href URL.

Gravity Forms popup (AJAX)

For asset gating with a Gravity Form, the popup fetches the form HTML via a WordPress AJAX action:

Handlebars

<a href="#gf-download-paper-popup"
   class="js-open-content-popup-asset-gf btn btn-primary"
   data-gf-id="{{properties.gravity_form_id}}"
   data-modal-title="{{properties.popup_title}}"
   data-modal-thumb="{{properties.popup_image.url}}">
  Download
</a>

The popup.js utility sends action: 'gf_button_get_form' to CYNO_DATA.ajax_url and renders the form response into #gf-download-paper-popup #gform-container.

Blocks that use popup.js

download, downloads-columns, downloads-list, downloads-split, hero-contact

Accessibility notes

Magnific Popup traps focus within the popup while it is open.
The popup container should include role="dialog" and aria-labelledby pointing to the popup heading.
Ensure all close buttons have visible focus styles and an aria-label="Close" attribute.
Use mfp-fade class on the outer container for a CSS transition; combine with @media (prefers-reduced-motion: reduce) to disable transitions for users who prefer it.