Modal

A dialog box/popup window that is displayed on top of the current page.

This is the title

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolore perspiciatis ea, voluptatem impedit est minima. Similique excepturi nihil tenetur porro vero enim error odit, ipsa odio ullam vel veritatis expedita.Dolore perspiciatis ea, voluptatem impedit est minima. Similique excepturi nihil tenetur porro vero enim error odit, ipsa odio ullam vel veritatis expedita.Dolore perspiciatis ea, voluptatem impedit est minima. Similique excepturi nihil tenetur porro vero enim error odit, ipsa odio ullam vel veritatis expedita.Dolore perspiciatis ea, voluptatem impedit est minima. Similique excepturi nihil tenetur porro vero enim error odit, ipsa odio ullam vel veritatis expedita.

Code Example

<z-modal>
  <h3 slot="title">Title</h3> <!-- optional -->
  <p>Lorem ipsum dolor ... </p>
  <button slot="footer" class="modal-close">Close</button> <!-- optional -->
  <button slot="footer" class="modal-save disabled">Save</button> <!-- optional -->
</z-modal>

<button class="modal-open">
  Open Modal
</button>

The Zen Test

Every component, section, and utility we ship will pass layout, color, and functional tests to ensure they perform flawlessly in today's modern browsers.

So you can be assured it "just works". Try it out below.