Modal - CSS Component ​

Playground ​

Customization ​

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 ​