Flex Modal Documentation

An advanced, fully‐customizable modal & off‑canvas drawer element for Bricks Builder. With center or slide‑in modes, nestable content, CSS‑variable styling, and live Builder preview, Flex Modal makes popups a breeze.

Table of Contents

Overview

The Flex Modal element lets you display any content in a popup overlay or side‑drawer. Key features include:

  • Center modal or off‑canvas drawer (slide from left/right/top/bottom).
  • Nestable inner container: drop headings, images, buttons, forms, etc.
  • Built‑in open/close triggers: button, backdrop click, ESC key.
  • Builder‑only “Keep open” toggle for live styling.
  • CSS‑variable‑based styling: backdrops, padding, blur, animations.
Screenshot of a centered modal with custom padding and close button.

Requirements & Installation

  • Bricks Builder v1.3+ installed and active.
  • BricksFlexAddons plugin installed & activated.
  • (Optional) Freemius license entered under “Bricks Flex Addons” in WP Admin to receive updates.

To install:

  • Upload the ZIP via Plugins → Add New → Upload Plugin, then Activate.
  • Enter your license key (if using Freemius) under Settings → Bricks Flex Addons.

Adding the Flex Modal Element

1. Open any page/template in Bricks Builder.
2. Click the “+” icon, search for Flex Modal, and drag it onto your canvas.
3. You’ll see a Trigger Button appear; this launches the modal on click.

How to use Flex Modal

Controls & Settings

Content Tab

ControlTypePurpose
Trigger TextText fieldThe label for the open‑modal button (default: “Open Modal”).
TypeSelectChoose modal (centered) or offcanvas (slide‑in).
Off‑Canvas DirectionSelectWhen Type = offcanvas, pick left, right, top or bottom.
Keep Open While StylingCheckboxIn‑Builder only: forces the modal open for live styling.

Settings Tab

No additional settings—styling is handled via CSS variables or custom CSS (see below).

Building Your Modal Content

Flex Modal is nestable. To insert content inside the popup:

  • Select the Flex Modal in the Structure panel.
  • Under it you’ll see a Modal Inner container.
  • Drag any Bricks elements (Headings, Images, Buttons, Forms) into this Inner container.
Structure panel showing nested Headings and Buttons inside the Flex Modal inner container.

Styling & Theming

CSS Variables

:root {
  --fa-backdrop: rgba(0,0,0,.55);
  --fa-blur: 2px;
  --fa-panel-bg: #fff;
  --fa-pad: 32px;
  --fa-shadow: 0 10px 30px rgba(0,0,0,.15);
  --fa-dur: .25s;
  --fa-ease: ease;
  --fa-close-size: 1.5rem;
  --fa-close-color: #000;
}

These variables power backdrop color, blur, panel styling, transitions, and close‑icon styling.

Overriding in Bricks

1. Select the Flex Modal Inner container.
2. In Advanced → CSS, paste:

--fa-panel-bg: #f9f9f9;
--fa-pad: 48px;
--fa-shadow: 0 4px 20px rgba(0,0,0,.2);

Custom CSS

If you need more control, use the global Stylesheet or the “Custom CSS” field in Bricks:

.bfa-modal__close:hover {
  color: var(--clr-accent);
}

Behavior & JavaScript

Flex Modal’s JS handles:

  • Open: clicking .bfa-modal-trigger adds .bfa-modal--open.
  • Close: clicking .bfa-modal__close, backdrop click (front‑end), or pressing Escape removes the open class.
  • Builder safeguard: backdrop clicks ignored when Builder is active.
document.addEventListener('click', e => {
  if (e.target.matches('.bfa-modal-trigger')) {
    document.getElementById(e.target.dataset.target)
            .classList.add('bfa-modal--open');
  }
  if (e.target.closest('.bfa-modal__close')) {
    e.target.closest('.bfa-modal')
            .classList.remove('bfa-modal--open');
  }
  if (e.target.matches('.bfa-modal.bfa-modal--open') &&
      !document.body.classList.contains('bricks-is-builder')) {
    e.target.classList.remove('bfa-modal--open');
  }
});
document.addEventListener('keydown', e => {
  if (e.key === 'Escape') {
    document.querySelectorAll('.bfa-modal--open')
            .forEach(m => m.classList.remove('bfa-modal--open'));
  }
});

Accessibility & Keyboard Support

  • The Close button is a <button> with an ARIA label—do not remove it.
  • Pressing Escape closes the modal.
  • Tab navigation is contained within the modal—consider adding a focus trap if needed.

Live Preview in Builder

Use Keep Open While Styling to lock the modal open in Bricks Builder:

  • Check the box under Content tab.
  • The modal appears, complete with backdrop and inner content.
  • Style freely—then uncheck and save.

Troubleshooting & Tips

  • Modal not opening? Check that the trigger’s data-target matches the modal’s ID.
  • Styles not applying? Verify you’re targeting the correct selector (.bfa-modal__inner or .bfa-modal).
  • Off‑canvas sliding wrong direction? Ensure Type = offcanvas and Direction matches.
  • Backdrop won’t close in Builder? Intended behavior to prevent accidental closing while styling.

Leave the first comment