How can I create a pop-up window with specific dimensions, containing an H1/H2 title, paragraph text with external links, and a close button in Webflow?

To create a custom pop-up window (modal) in Webflow with specific dimensions, text elements, external links, and a close button, follow these steps using Webflow's Designer and interactions tools.

1. Create the Pop-Up Structure

• Drag a Div Block onto the page and name it something like Popup Wrapper.
• Set its position to Fixed, align to center center, set a high z-index (e.g., 9999), and give it hidden by default (Display: None).
• Give it a background-color (e.g., white), box shadow, padding, and your desired width/height (e.g., Width: 500px, Height: auto or fixed like 300px).
• Optionally add rounded corners.

2. Add Pop-Up Content

• Inside Popup Wrapper, add an H1 or H2 element, a Paragraph element, and a Button for the close action.
• In the paragraph, you can create inline links by highlighting text and clicking the link icon in the Rich Text field or using a Text Block with a Link Block if needed.
• Style the header, text, and links as desired using the Style panel.

3. Add a Background Overlay (Optional)

• Add another Div Block named Popup Overlay.
• Set it to position: Fixed, full screen, black with reduced opacity (e.g., rgba(0,0,0,0.5)).
• Set it to Display: None by default as well. Place this below Popup Wrapper in Z-index (e.g., Overlay: 9998, Popup Wrapper: 9999).

4. Set Up Interactions to Show the Pop-Up

• Select the element (e.g., a button) that will trigger the pop-up.
• Go to the Interactions panel, add a new Mouse Click interaction.
• Choose Show/Hide elements, and set both the Popup Overlay and Popup Wrapper to Display: Flex or Block and change their opacity from 0% to 100% with a smooth transition.

5. Close Button Interactions

• Select the Close button inside the modal.
• Set up another Mouse Click interaction.
• Define actions to hide both Popup Wrapper and Popup Overlay, using opacity to 0% and then Display: None.

6. Optional: Prevent Scroll When Pop-Up is Open

• When the modal opens, use interactions to set the Body’s overflow to hidden to prevent background scrolling.
• When the modal closes, set Body overflow back to auto or visible.

Summary

Set up a fixed-position modal Div, style it to your needed dimensions, and add H1/H2, paragraph text with links, and a close button. Use interactions to toggle visibility and animations. Optionally, include a semi-transparent background and disable scrolling for a cleaner UX.