Modal

...

Browser support

...

Parameters

The CSS component uses a <dialog> tag with the z-modal HTML custom attribute.

The parametrization of the component can be done with the following custom HTML params:

Name	Type	Description
z-modal	string	Custom attribute for the modal component

The events emitted from the component are:

Name	Payload	Description
onchange	boolean	Returns the new value of the "value" attribute

Playground

Customization

HTML Examples

Imports

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

Code

<button id="button" z-button="primary" icon="arrow-diagonal:outline">Open modal</button>
<main id="modal" z-modal>
  <section>
    <button id="close-modal" z-button="link" icon="close:outline"></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>