A modal is the most disruptive notification. It blocks the page until the user makes a decision, so use it only when the user must confirm or choose before going on.
How to open a modal from script and the CSS behind it. The files are eco-design-system/notifications.css and notifications.js.
Link the shared files once per page. Never copy the rules into a page.
| Step | What to do |
|---|---|
| 1. Link | <link rel="stylesheet" href="/eco-design-system/notifications.css"> and <script src="/eco-design-system/notifications.js"></script>. Link button.css first. |
| 2. Open | Call ECO_N.openModal({ size, title, body, cancel, confirm }). The script adds the overlay, the focus trap, the scroll lock and the three ways to close. |
| 3. React | onConfirm runs when the primary button is pressed; onClose(reason) runs on every close. |
| Setting | Use |
|---|---|
size | small (default) or large. |
label | Optional uppercase label above the title. |
title, body | The title and the body text. |
cancel, confirm | The button labels. Defaults: Cancel, Confirm. |
onConfirm | Runs when the primary button is pressed. |
onClose(reason) | Reason: close, esc, overlay, cancel or confirm. |
| Name | Use |
|---|---|
--modal-in-ease, --modal-in-duration | Enter. Defaults: ease-decelerate-emphasized, duration-fast-4. |
--modal-out-ease, --modal-out-duration | Exit. Defaults: ease-accelerate-generic, duration-fast-3. Set on <html>. |
openModal returns { close, el }.body.has-modal. onClose and the focus return run at once; the dialog is removed after the fade out.button.css is on the page.The component is one CSS file and one script, shared by every notification. Link them, never copy them. The code below is read from the files the page links, so it is always what you see.