How can I fix the issue where a modal in a Webflow CMS collection only overlays the Collection List Wrapper area instead of the entire viewport?

Your modal is likely positioned relative to its Collection List's container, which restricts its overlay to just that area. You need to adjust the modal’s parent container and styles so that it overlays the entire viewport.

1. Move the Modal Outside the Collection List

• Place the modal element outside the Collection List Wrapper in the Navigator panel.
• This ensures the modal isn't constrained by the CMS item’s bounding box or positioning.
• If the modal content needs to be unique per item, use a dynamic embed or show/hide logic tied to each CMS item using custom scripting.

2. Apply Correct Position and Sizing to the Modal

• Set the modal container to Position: Fixed and Full (top: 0, bottom: 0, left: 0, right: 0).
• Give it a high z-index (e.g., 9999) to ensure it appears above other content.
• Apply overflow: auto if the modal content exceeds viewport height.
• For usability, add a background div with semi-transparent black (rgba(0,0,0,0.5)) as the overlay backdrop.

3. Trigger the Modal Correctly

• From within your Collection List, use unique IDs or data attributes to open the modal.
• Add an interaction or custom script that listens for clicks on the CMS item’s trigger and then displays the modal.
• For example, use Webflow’s Element Trigger → Mouse Click (Tap) to control the modal’s visibility.

4. Prevent Scroll Inside Collection Wrapper

• If needed, on modal open, set the body’s overflow to hidden to prevent background scrolling.
• This can be done using interactions or custom code: e.g., document.body.style.overflow = 'hidden' and revert it on modal close.

Summary

Your modal is constrained because it's nested inside the CMS Collection. Move it outside the Collection, set it to Fixed position covering the full viewport, and use custom interactions or scripting to dynamically show it based on the item clicked.