Modal
Description
NB! Modal dialogs interrupt users and demand an action. They are appropriate when user’s attention needs to be directed toward important information.
Behavior
The modal can be triggered from either a button or by using the open_state
property. Triggering a modal will activate the opaque overlay and display the contents.
Structure and content
Typically an opaque cover over the main content (fullscreen) and a small centered box containing information and interactive elements (buttons, forms etc.)
What is it
Modal dialogs appear on top of the main content changing the mode of the system into a special mode requiring user interaction. The main content is disabled until the user interacts with the modal dialog.
Disadvantages of modal Dialogs
- They require immediate attention
- They interrupt users
- They cause users to forget what they were doing
- They add extra goals - reading, interacting and closing the Modal
- They block the content in the background
Guidelines
- Use for important warnings as a way to prevent or correct critical errors.
- Do not use for unessential information that is not related to the users current workflow.
- Use for requesting the user to enter information critical to the current process.
Design Patterns
Root Element
NB: If the wrapper is not set manually, a wrapper is inserted automatically as a child node to the body.
To make sure the HTML structure is decoupled from all the page content, You can optionally define a wrapper div like <div class="dnb-modal-root" />
.
Just place this as a sibling of Your App root HTML element. This ensures that we always can stack the modal content above the App Content.
<body><div id="app" /><div id="dnb-modal-root" /></body>
Z-index
The Modal component is using 3000 as the z-index
.
:root {--modal-z-index: 3000;}
Sizing and spacing
You have the properties min_width
and max_width
. But by using these, the width styles get injected inline, witch normal circumstances works fine. But in case you want to set it by CSS, you can do so:
/* Change the Modal size */.dnb-modal__content__inner {min-width: 20vw;max-width: 40rem;}/* Change the Modal spacing */:root {/* Defaults to --spacing-large */--modal-spacing: var(--spacing-small);}
dnb-core-style
Styles and In case you don't use the CSS package dnb-ui-core
- you have to make sure you assign the HTML class dnb-core-style
:
/* Either to the Modal */<Modal className="dnb-core-style">...</Modal>/* - or to the root element */<body><div id="app" /><div id="dnb-modal-root" class="dnb-core-style" /></body>
Demos
Triggered by a icon button
Fullscreen Modal, triggered by a tertiary button
Hide the Close Button and Prevent Close for 1sec
Triggered by custom trigger button
Close Modal by handlers