Webflow Modals

This course covers the creation of pop-ups and modals in Webflow.

There are generally 3 approaches;

• Use Webflow's interactions to design pop-ups directly

Pop-ups v. Modals

We'll generally use the terms "pop-ups" and "modals" interchangeably- however there is a distinction.

Pop-ups are informational and can be opened and closed at any time. They are "parallel" to the main UX and not a direct part of the flow.

Special offers and alerts are common uses for pop-ups.

Modals generally appear in response to a user action, and require a specific user action to close them. The user must complete a form, or click an "I accept" button, etc.

A modal cannot be closed without completing that action, and in general something happens ( visible, or not ) once the modal is completed.

Examples;

• Age-gating. Enter your birthdate, a formula determines if you can enter.
• Accept agreement.
• Subscribe to newsletter, enter your email.

In general, modals can be close by either completing the requested action, or possibly clicking a cancel button.