Smart Lightbox

Change the position of an opened lightbox to prevent unwanted z-index, fixed positioning, and transform issues.

Get Started

loads per month

Step #1

Copy the Solution <script> and paste into the <head> of your page

Copy Script

Scroll horizontally to see documentation

Step #2

Implement in Webflow

Apply attributes to elements on the page

Below is a list of elements and options that are used to create this Attributes functionality. Click any of them to see more details.

Lightbox

I want this

Div Block or Webflow Lightbox Component

to be fixed on the page

See how it works

Add this attribute

Description

Name

fs-smartlightbox-element

Value

lightbox

This is the lightbox / popup / modal element. Place this attribute on the outer parent of the lightbox.

This element will change its position in the DOM when it is opened and closed.

When the lightbox is open - The lightbox will become a direct child of the Body. This will avoid all z-index, fixed position, and transform issues.

When the lightbox is closed - The lightbox will return to its original position on the page.

TRIGGER OPEN

This is the

Button, Text Link, Link Block, or Div Block

that opens the lightbox

See how it works

Add this attribute

Description

Name

fs-smartlightbox-element

Value

trigger-open

When this element is clicked, the Smart Lightbox functionality is enabled. The lightbox will change its position in the DOM.

This should applied to a "Open" button that opens the lightbox.

IMPORTANT: This attribute does not open the lightbox. Use Webflow Interactions to perform the action of opening the lightbox.

TRIGGER CLOSE

This is the

Button, Text Link, Link Block, or Div Block

that closes the lightbox

See how it works

Add this attribute

Description

Name

fs-smartlightbox-element

Value

trigger-close

When this element is clicked, the Smart Lightbox functionality is disabled. The lightbox will return to its original position in the DOM.

This should be applied to an "X" or "Close" button that closes the lightbox.

IMPORTANT: This attribute does not close the lightbox. Use Webflow Interactions to perform the action of closing the lightbox.

TRIGGER TOGGLE OPEN/CLOSE

This is the

Button, Text Link, Link Block, or Div Block

that toggles opening and closing of the lightbox

See how it works

Add this attribute

Description

Name

fs-smartlightbox-element

Value

trigger-toggle

When this element is clicked, the Smart Lightbox functionality is toggled on and off. The lightbox will change its position in the DOM.

This should be applied to a button that both opens and closes the lightbox.

IMPORTANT: This attribute does not open/close the lightbox. Use Webflow Interactions to perform the action of opening/closing the lightbox.

Option

WAIT TO CLOSE

I want to delay the Smart Lightbox functionality when the lightbox is closed

See how it works

Add this attribute

Description

Name

fs-smartlightbox-wait

Value

TIME_IN_MS

Use this option to delay the Smart Lightbox functionality on close of the lightbox. This option is useful for waiting until a Webflow Interaction has finished.

For example, TIME_IN_MS can be set to "400" because the animation that closes the lightbox has a 400ms transition time in Webflow Interactions.

The value should be in milliseconds without "ms". For example "250".

Where?

Add to an element with fs-smartlightbox-element = "trigger-{open | close | toggle}"

Working examples

See this solution working live in this Webflow project.

Example 1

Transform issue with fixed position lightbox

Issue without fs-smartlightbox applied (click on open modal to see):
The lightbox that has position fixed gets stuck inside the parent wrapper of the list.