Modal
A modal is a dialogue window designed to interrupt a user's page experience. It is often used to convey critical information or for actions that require review or completion before returning to the task flow or page.
Structure
The modal consists of a headline, rich text, a close button, and a call-to-action. The background is darkened during the process.
Headline
Text
Close Icon: to close the modal
Call-to-action
Darkened background
Use case
In general, a modal window appears on top of the current webpage, with the purpose of either interrupting the user's current activity or guiding them through a specific process. Modals are commonly used to draw attention to important information, gather user input, or confirm an action before proceeding.
On the BASF Agricultural Solutions website, modals are mainly used to register for services or for events.
Difference between modal and pop-up
A modal is different from a pop-up in that it covers the entire screen and prevents interaction with the rest of the content until it is closed. A pop-up on the other hand is usually a separate, smaller window that displays extra information and often still allows interaction with the page.
Best practice
Use clear call-to-actions. The CTA button prompts the user to take a specific action, such as 'Save', 'Submit', or 'Done'.