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.

Content of the modal

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.

document.getElementById("modal").setAttribute('open', 'true');

To hide the modal, remove the open attribute from the z-modal container.

document.getElementById("modal").removeAttribute('open');

Playground

Customization

HTML Examples

Imports

<link rel="stylesheet" href="/0.5.3/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.5.3/@zurich/design-tokens/Icons.css" />
<link rel="stylesheet" href="/0.5.3/@zurich/css-components/Modal.css" />
<link rel="stylesheet" href="/0.5.3/@zurich/css-components/Button.css" />

Code

<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>