How to make a custom lightbox with Webflow interactions

Making a custom lightbox using Webflow interactions is easy and can be used for many purposes including popup messages, modals, and custom galleries.

Step 1. Set up your custom lightbox

Structure your custom lightbox using a Link Block (wrapper), an Image (open), a Div Block (lightbox) and another Image (close).

Step 2. Design your custom lightbox

Assign the Div Block a class named Lightbox.

Set the Lightbox element’s Height to 100% with a Fixed Position (Full), and give it a Fill color of rgba(0,0,0,0.8). Once you’re done adding the elements you want to be displayed in your lightbox, set the Lightbox element to Display None.

NOTE: To ensure your lightbox is displayed on top of your site’s content, place your Custom Lightbox element inside the Body element with a Z-index setting higher than its siblings.

Step 3. Add an Interaction to your open element

With your “Image (open)” element selected, navigate to the Global Objects tab, click the Add Interaction button, and give your interaction a name.

Step 4. Add a Click Trigger

Click on the Add Trigger button and select the Click Trigger option. In the Edit Trigger Click menu, select Affect Different Elements, and enter the name of the class you assigned to the Div Block (Lightbox) from Step 2.

NOTE: If you plan to use this interaction on more than one Lightbox, make sure to check the Limit to Sibling Elements option.

Step 5. Add a First Click Step

In the First Click section, click on the Add Step button, set Display to Block, and click Done.

NOTE: Since we are using two different elements to open and close the lightbox, we will not add a Second Click step.

Step 6. Add an Interaction to your close element

With your “Image (close)” element selected, repeat Steps 3, 4, and 5 with a few small differences.

NOTE: The close interaction is set to affect all elements with the name Lightbox and will not have any limit options selected.

Bonus Step: Fade in your Lightbox

Set the Lightbox element to Opacity 0%. Next, add an additional First Click step to your open and Close interactions that changes the Opacity to 100% when opened and back to 0% when closed.