Skip to content

Modal - CSS Component

The Modal component can be used imported from:

Playground

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.

Open modal
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.

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');

Browser support

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

HTML Examples

CodeSandbox example