Dynamic Lightbox

Renato Corluka
September 12, 2024

There are two variations Dynamic Lightbox component:

  1. Classic – this variation is aimed when you don’t have many posts to loop and content of the post is not too long. This is because all the content is loaded when page is loaded and if you have many posts with long content it could lead to huge DOM load. Benefit of this is that all of it could be cached.
    Check demo
  2. Iframe – when loading via iframe, each modal content will be loaded on demand when user clicks. This method is more like loading via AJAX, just it does not require PHP code to make it. Also there is option to make template condition based on url parameter so you could design special single post template within page builder just for showing within modal.
    Check demo

Configuration

Dynamic data

Configuration for dynamic data is the same as pulling any post within Breakdance. We’ll have Post loop element inside page or template and adjust query to our needs.

Cleanshot 2024 08 27 At 10.18.59

Global code block

In modal code you will find div named Global code block. You’ll need to go:

  1. WP Admin > Breakdance > Global blocks
  2. Create new Global code block with some name eg. Dynamic Lightbox Card
  3. Copy/Paste that element called Global block to created

Styling features

Iframe template setup

By default you will need to pass post url which should be opened in iframe within modal.

You need to:

  1. WordPress Admin > Breakdance > Templates
  2. Add New Template > Single Post* (or CPT and whatever you want to load)
  3. Set condition > Dynamic data
  4. Under Dynamic data pick URL parameter option
  5. Click on URL parameter chip and set it to loadoveriframeistrue
  6. Give template some higher priority like 1000

Check video how to set it up:

A11Y Features

All elements that have related a11y attributes have a11y in name so they are easier to find and tweak exactly to own need.

Focus trap

The process of designing a modal component entails various considerations. One of these considerations is ensuring proper focus management. Focus trapping is a technique that plays a vital role in this process.

When a modal is open, we keep track about focus-able items that are the part of modal such as buttons, links and form inputs. These items are part of webpage focus flow, and we need to isolate them because if our focus gets to the first or the last focus-able item it could get out of modal and focus invisible items under the modal.

Focus trap kicks here into the place by intercepting moving focus from the last item and gets cycle back to the first focus item inside modal, and vice versa.

Scroll trap

When we open modal, we want user to be focused on the modal content and freeze document under the modal. There are some problems because we don’t have right now all the needed tool out-of-the-box to stop main document from scrolling. We could implement overscroll-behavior: contain; which will stop accidental scrolls propagating when scrolling modal to main document, but user could still scroll over backdrop element.

Scrolling main document while modal is open is bad UX because user could end up on other

Role, Property, State, and Tabindex Attributes

RoleAttributeElementUsage
dialogdivIdentifies the element that serves as the dialog container.
aria-labelledby=”IDREF”divGives the dialog an accessible name by referring to the element that provides the dialog title.
aria-modal=”true”divTells assistive technologies that the windows underneath the current dialog are not available for interaction (inert).
buttontabindex=”0″
aria-pressed=”true”
divTells assistive technologies that div wrapper acts as button, uses tabindex=”0″ to be in natural focus flow and aria-pressed tells whenever related modal is open or not

Keyboard navigation

KeyFunction
Tab– Moves focus to next focusable element inside the dialog.
– When focus is on the last focusable element in the dialog, moves focus to the first focusable element in the dialog.
Shift + Tab– Moves focus to previous focusable element inside the dialog.
– When focus is on the first focusable element in the dialog, moves focus to the last focusable element in the dialog.
EscapeCloses the dialog.
Arrow RightOpens next item in modal
Arrow LeftOpens previous item in modal

Teleporting card content

If you want to teleport part of the card inside modal body you need to use attribute data-tepleport=”true”. This attribute should be present on div which is holding card content to be teleported and on div named Teleport here which tells where should we inject content.

Cleanshot 2024 08 27 At 16.02.31

Animation Options

We could configure animation with attribute on element named Dynamic Lightbox.

name: data-animation
values: none | scale | slide

Cleanshot 2024 08 23 At 16.14.08

    Headspin Logo
    1.2.3
    Built with
    Breakdance
    and
    Headspinui
    @ 2024 HeadspinUI. All rights reserved.