Modal - CSS Component
...
Browser support
Detected engine:
Chromium
Webkit
Gecko
Construction
The CSS component uses a <dialog>
or a <main>
tag with the z-modal
HTML custom attribute.
z-modal
The z-modal
parameter is the main parameter used to render the modal component.
INFO
The open
status of the Modal
in the CSS version must be achieved via JavaScript. This is done by adding the open
attribute to the z-modal
container.
js
document.getElementById("modal").setAttribute('open', 'true');
To hide the modal, remove the open
attribute from the z-modal
container.
js
document.getElementById("modal").removeAttribute('open');
Playground
Customization
HTML Examples
Imports
html
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.5.0/@zurich/design-tokens/Icons.css" />
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/Modal.css" />
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/Button.css" />
Code
html
<button id="button" z-button="primary" icon="arrow-diagonal:line">Open modal</button>
<main id="modal" z-modal>
<section>
<button id="close-modal" z-button="link" icon="close:line"></button>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Et at commodi, debitis aliquam aperiam, odit libero
rerum, error repudiandae magnam impedit neque nobis! Molestias, enim a rem quo velit facere.
</section>
</main>