How can I create a popup modal in Webflow that displays a layout matching the CMS Collection Page Template, with the URL taken from the CMS Collection Item, when I cannot use a CMS Collection List to display the links?

Published on
September 22, 2023

To create a popup modal in Webflow that displays a layout matching the CMS Collection Page Template, with the URL taken from the CMS Collection Item, even when you cannot use a CMS Collection List to display the links, follow these steps:

  1. Create the CMS Collection: Start by creating a CMS Collection and the necessary fields for your items, including a field for the URL.
  2. Create the Modal: Design and create the popup modal layout exactly as you want it to appear. You can use a combination of divs, text boxes, images, and any other elements you desire.
  3. Link the Modal to CMS Collection Item: Add a link block or button element on your Collection Page Template and give it a unique interaction trigger class name.
  4. Create the Interaction: Select the link block or button element, go to the Interactions Panel, and create a new interaction triggered by the unique class name you set in the previous step.
  5. Configure the Interaction: In the interaction panel, choose the "Open Overlay" option. This will open the overlay (modal) when the link block or button is clicked.
  6. Set Modal Content: Inside the interaction panel, click on the Open Overlay action and choose your popup modal as the target.
  7. Bind Modal to CMS Data: Select the area inside the modal where you want to display the CMS Collection Item data. Use the Data Binding feature to bind the fields from the CMS Collection to the respective elements within the modal.
  8. Set Modal URL: Add a plain text element inside the modal and bind the URL field from the CMS Collection to it. This will dynamically update the URL in the popup modal based on the CMS Collection Item being displayed.
  9. Style the Modal: Customize the styles of your modal to match the design of your CMS Collection Page Template. You can use the Style Panel to adjust fonts, colors, backgrounds, etc.
  10. Test and Publish: Preview your CMS Collection Page and click on the link block or button to test the popup modal. Make any necessary adjustments until it looks and functions as desired. Once satisfied, publish the changes to your live site.

By following these steps, you can create a popup modal in Webflow that displays a layout matching the CMS Collection Page Template, with the URL taken from the CMS Collection Item, even when you cannot use a CMS Collection List to display the links.

Additional Questions:

  1. How do I create a popup modal in Webflow?
  2. Can I display dynamic content in a Webflow modal?
  3. How can I link a CMS Collection Item to a popup modal in Webflow?