How can I set up multiple modal windows in Webflow for my art website to display contact information and larger images of my paintings?
TL;DR
- Create separate modal wrappers with unique IDs or classes for each content type (e.g., image, contact).
- Set up open/close interactions using Webflow’s Interactions panel, linking each trigger to its corresponding modal and animating visibility changes.
To set up multiple modal windows in Webflow—for showing contact info and enlarged artwork images—you'll use interactions and unique IDs for each modal.
1. Create Structure for Modal Windows
- Add a div block inside your page wrapper and name it something like Modal Wrapper.
- Inside the wrapper, add:
- Another div block for the modal content.
- A Close Button (use a text block or an icon).
- For image modals, insert an Image element.
- For contact modals, use text or form elements.
- Set the modal wrapper’s display to none, fixed position, full width/height, and a high z-index.
2. Assign Unique Classes or IDs
- Assign a unique class or ID to each modal—for example,
Modal-Image-1,Modal-Image-2,Modal-Contact. - This makes targeting specific modals with interactions easier.
3. Create Open Triggers
- Use buttons, thumbnail images, or links to trigger each modal.
- Give each trigger a unique class like
Open-Modal-Image-1, based on the image or modal it should open.
4. Set Up Open Modal Interactions
- Select a modal trigger (e.g., a thumbnail image).
- Go to Interactions panel → Element trigger → Mouse click (tap).
- Choose Start an Animation → New Timed Animation.
- Add an action to set the modal’s display to block and opacity to 0%.
- Animate opacity from 0% to 100% over ~200ms.
- Name the interaction (e.g., "Open Modal Image 1").
Repeat this process for every modal and match the correct modal wrapper.
5. Set Up Close Modal Interactions
- Select the modal’s close button.
- Go to the Interactions panel → Mouse click (tap).
- Choose Start an Animation → New Timed Animation.
- Animate the modal’s opacity to 0%, then set display to none.
- Use the same animation for all modals if they share a class, or duplicate and edit for each specific modal.
6. Optional: Add Overlay and Scroll Lock
- Add a semi-transparent overlay by setting a background color on the modal wrapper.
- To prevent page scrolling when a modal is open, create an interaction to apply overflow: hidden to the
body(use a page-level trigger or custom code if needed).
Summary
To set up multiple modals in Webflow, create individual modal wrappers for each item, assign them unique classes or IDs, and then use Webflow’s interactions to show and hide the modals based on user clicks. You'll repeat the interaction setup for each modal you want to display, ensuring that triggers and modals are correctly linked.