Component

Dialog

A real dialog element, with a jelly panel inside.

Import jellyfy/modal.css with jellyfy/material.css and jellyfy/motion.css. Or import jellyfy/jellyfy.css, which already includes this file and every other component.

Classes

Class	Type
modal	Component	The dialog element.
modal-panel	Part	The panel.
modal-sm	Size	Small size
modal-md	Size	Medium size (default)
modal-lg	Size	Large size
btn-bump	Part	The close control. It sits 0.75rem from the top and the trailing edge of the panel.
btn-sm	Size	Small size
btn-md	Size	Medium size (default)
btn-lg	Size	Large size
primary	Color	Put the color on the panel. It tints the panel, and the close control uses the surface content color. With no color, both stay plain.
secondary	Color	Pink by default.
tertiary	Color	Teal by default.
neutral	Color	Gray by default.
success	Color	Green by default.
error	Color	Red by default.
warning	Color	Amber by default.
info	Color	Sky by default.

Open and close

Open it with showModal() on the dialog element. The form method="dialog" closes it. With no color, the panel and the close control stay plain.

<button class="btn" type="button">Open</button>
<dialog class="modal">
  <div class="modal-panel">
    <form method="dialog">
      <button class="btn-bump" type="submit" aria-label="Close">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg>
      </button>
    </form>
    <h2>A note</h2>
    <p>Surface panel.</p>
  </div>
</dialog>

Colors

The color goes on modal-panel. It tints the panel and the close control.

<div class="modal-panel primary">
  <h2>Primary</h2>
</div>
<div class="modal-panel secondary">
  <h2>Secondary</h2>
</div>
<div class="modal-panel tertiary">
  <h2>Tertiary</h2>
</div>
<div class="modal-panel neutral">
  <h2>Neutral</h2>
</div>
<div class="modal-panel success">
  <h2>Success</h2>
</div>
<div class="modal-panel error">
  <h2>Error</h2>
</div>
<div class="modal-panel warning">
  <h2>Warning</h2>
</div>
<div class="modal-panel info">
  <h2>Info</h2>
</div>