How to add an attribute:

close icon
Hey! Give us some feedback here.
Functional

Smart Lightbox

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

Smart Lightbox
Step #1

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

copy icon
Copy Script
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.

navigator arrow
Lightbox
I want this
div block icon

Div Block or Webflow Lightbox Component

to be fixed on the page
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-smartlightbox-element
copy icon
Value
lightbox
copy icon
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.
navigator arrow
TRIGGER OPEN
This is the
button icon

Button, Text Link, Link Block, or Div Block

that opens the lightbox
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-smartlightbox-element
copy icon
Value
trigger-open
copy icon
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.
navigator arrow
TRIGGER CLOSE
This is the
button icon

Button, Text Link, Link Block, or Div Block

that closes the lightbox
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-smartlightbox-element
copy icon
Value
trigger-close
copy icon
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.
navigator arrow
TRIGGER TOGGLE OPEN/CLOSE
This is the
button icon

Button, Text Link, Link Block, or Div Block

that toggles opening and closing of the lightbox
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-smartlightbox-element
copy icon
Value
trigger-toggle
copy icon
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.
navigator arrow
Option
WAIT TO CLOSE
I want to delay the Smart Lightbox functionality when the lightbox is closed
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-smartlightbox-wait
copy icon
Value
TIME_IN_MS
copy icon
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.
How to add an Attribute

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Extend Webflow without code

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Learn one, learn them all

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Customize options without code

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Issue with fs-smartlightbox applied (click on open modal to see):
The lightbox that has position fixed works as intended because it's 'smartly' moved in the DOM. When opened, it becomes a direct child of the Body.
How to add an Attribute

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Extend Webflow without code

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Learn one, learn them all

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Customize options without code

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Copy and paste this example directly on Webflow
locked icon
Coming soon

Developer documentation

external link icon

Next time implement inside Webflow

external link icon

Need help? Use the Automated Support Service

Subscribe

Sign up for future releases!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.