How can I set up multiple modal windows in Webflow for my art website to display contact information and larger images of my paintings?
- Create individual modal structures with unique IDs and relevant content for each artwork or contact info section.
- Link each trigger (button, image, etc.) to the correct modal using custom attributes and set up Webflow interactions to toggle visibility.
- Optionally, use Webflow CMS to dynamically generate modals within a collection list for scalable content management.
To set up multiple modal windows in Webflow for displaying contact info and enlarged artwork, you'll need to build a reusable modal structure and connect each trigger to its respective content.
1. Create the Modal Structure
- Add a Div Block to the page and give it a class like
Modal Wrapper. - Set the position to Fixed, width and height to 100%, and display to Flex (centered).
- Set visibility to Hidden and z-index high (e.g., 9999).
- Inside it, add another Div Block (e.g.,
Modal Content) for your modal content. Style it with padding, background color, and max width. - Add a Close Button inside
Modal Content(an image or a button withX).
2. Build One Modal for Each Artwork
- Duplicate the modal structure for each image/modal you need.
- Set a unique ID (e.g.,
modal-1,modal-2) for eachModal Wrapper. - Inside each, insert the relevant content: contact form or larger image and artwork details.
3. Create Triggers to Open Each Modal
- Add a button, link, or image next to each painting.
- Give each trigger a unique CMS field or class if using CMS, or manually assign custom attributes in the Element Settings panel:
- Attribute Name:
data-modal-target - Attribute Value: the corresponding modal’s ID (e.g.,
modal-1)
4. Add Custom Interactions to Open/Close Modals
For each trigger, create a new Click interaction:
Action: Show/Display the corresponding modal (Set Display to Flex and Opacity to 100%).
For the close button, create another click interaction:
Action: Hide the modal (Set Display to None and Opacity to 0%).
Optionally add a Click to Close interaction on the
Modal Wrapperbackground (excluding Modal Content) to allow closing by clicking outside the modal.
5. Optional: Use Webflow CMS for Dynamic Modals
If you manage paintings in the CMS:
- Add a modal inside the Collection List.
- Use conditional visibility based on the selected item.
- This enables dynamic modals without building one manually for each item.
Summary
To enable multiple modal windows in Webflow, create a structured modal wrapper for each piece of content, connect each open trigger using unique identifiers or attributes, and control visibility using Webflow interactions. For many similar modals, use the CMS for dynamic content population.