Dialogs

Style modifier class for HTML <dialog> modals.

Source file: src/css/dialogs.css
View on GitHub: https://github.com/pmbrown/ming-css/blob/main/src/css/dialogs.css

Included with:

ming.css
ming.min.css
ming.mono.css
ming.mono.min.css

Default (anchor)

Example HTML

<button commandfor="dialog-heading" command="show-modal">Dialog heading</button>
<dialog class="dialog" id="dialog-heading">
  <h3>Heading text</h3>
  <p>Far far away behind the word mountains there lived the blind texts.</p>
  <button commandfor="dialog-heading" command="close">Close</button>
</dialog>

<button commandfor="dialog-text" command="show-modal">Dialog text</button>
<dialog class="dialog" id="dialog-text">
  <p>Far far away behind the word mountains there lived the blind texts.</p>
  <button commandfor="dialog-text" command="close">Close</button>
</dialog>

Example HTML

<button commandfor="dialog-head-top" command="show-modal">Button top (heading)</button>
<dialog class="dialog" id="dialog-head-top">
  <h3>Heading text</h3>
  <p>Far far away behind the word mountains there lived the blind texts.</p>
  <button class="close-dialog" commandfor="dialog-head-top" command="close">Close</button>
</dialog>

<button commandfor="dialog-text-top" command="show-modal">Button top (text)</button>
<dialog class="dialog" id="dialog-text-top">
  <p>Far far away behind the word mountains there lived the blind texts.</p>
  <button class="close-dialog" commandfor="dialog-text-top" command="close">Close</button>
</dialog>

Utilities (anchor)

Close button icon (anchor)

The icon buttons utilities include a close button icon:

Example HTML

<button commandfor="dialog-head-btn" command="show-modal">Heading button</button>
  <dialog class="dialog" id="dialog-head-btn">
  <h3>Heading text</h3>
  <p>Far far away behind the word mountains there lived the blind texts.</p>
  <button class="close-dialog ico-btn ico-close" commandfor="dialog-head-btn" command="close"><span class="vis-hidden">Close</span></button>
</dialog>

<button commandfor="dialog-text-btn" command="show-modal">Text button</button>
  <dialog class="dialog" id="dialog-text-btn">
  <p>Far far away behind the word mountains there lived the blind texts.</p>
  <button class="close-dialog ico-btn ico-close" commandfor="dialog-text-btn" command="close"><span class="vis-hidden">Close</span></button>
</dialog>

Offcanvas (anchor)

The offcanvas utilities work with the dialogs and popovers.

Example HTML

<button commandfor="dialog-start" command="show-modal">Dialog start</button>
  <dialog id="dialog-start" class="dialog offcanvas-start">
  <h3>Heading text</h3>
  <p>Far far away behind the word mountains there lived the blind texts.</p>
  <button commandfor="dialog-start" command="close">Close</button>
</dialog>

<button commandfor="dialog-end" command="show-modal">Dialog end</button>
  <dialog id="dialog-end" class="dialog offcanvas-end">
  <h3>Heading text</h3>
  <p>Far far away behind the word mountains there lived the blind texts.</p>
  <button commandfor="dialog-end" command="close">Close</button>
</dialog>

<button commandfor="dialog-top" command="show-modal">Dialog top</button>
  <dialog id="dialog-top" class="dialog offcanvas-top">
  <h3>Heading text</h3>
  <p>Far far away behind the word mountains there lived the blind texts.</p>
  <button commandfor="dialog-top" command="close">Close</button>
</dialog>

<button commandfor="dialog-bottom" command="show-modal">Dialog bottom</button>
  <dialog id="dialog-bottom" class="dialog offcanvas-bottom">
  <h3>Heading text</h3>
  <p>Far far away behind the word mountains there lived the blind texts.</p>
  <button commandfor="dialog-bottom" command="close">Close</button>
</dialog>

Light & dark (anchor)

Fixed color-scheme utilities included with the backgrounds.

Example HTML

<button commandfor="dialog-light" command="show-modal" class="light">Light</button>
  <dialog class="dialog light" id="dialog-light">
  <h3>Heading text</h3>
  <p>Far far away behind the word mountains there lived the blind texts.</p>
  <button commandfor="dialog-light" command="close">Close</button>
</dialog>

<button commandfor="dialog-dark" command="show-modal" class="dark">Dark</button>
  <dialog class="dialog dark" id="dialog-dark">
  <h3>Heading text</h3>
  <p>Far far away behind the word mountains there lived the blind texts.</p>
  <button commandfor="dialog-dark" command="close">Close</button>
</dialog>

Primary colors (anchor)

The dialogs color classes use the primary colors variables, the source file is included separately.

Source file: src/css/colors/color-dialogs.css
View on GitHub: https://github.com/pmbrown/ming-css/blob/main/src/css/colors/color-dialogs.css

Included with:

ming.css
ming.min.css

Example HTML

<button commandfor="dialog-primary" command="show-modal" class="btn-primary">Primary</button>
  <dialog class="dialog-primary btn-primary" id="dialog-primary">
  <h3>Heading text</h3>
  <p>Far far away behind the word mountains there lived the blind texts.</p>
  <button commandfor="dialog-primary" command="close">Close</button>
</dialog>

<button commandfor="dialog-success" command="show-modal" class="btn-success">Success</button>
  <dialog class="dialog-success btn-success" id="dialog-success">
  <h3>Heading text</h3>
  <p>Far far away behind the word mountains there lived the blind texts.</p>
  <button commandfor="dialog-success" command="close">Close</button>
</dialog>

<button commandfor="dialog-danger" command="show-modal" class="btn-danger">Danger</button>
  <dialog class="dialog-danger btn-danger" id="dialog-danger">
  <h3>Heading text</h3>
  <p>Far far away behind the word mountains there lived the blind texts.</p>
  <button commandfor="dialog-danger" command="close">Close</button>
</dialog>

<button commandfor="dialog-info" command="show-modal" class="btn-info">Info</button>
  <dialog class="dialog-info btn-info" id="dialog-info">
  <h3>Heading text</h3>
  <p>Far far away behind the word mountains there lived the blind texts.</p>
  <button commandfor="dialog-info" command="close">Close</button>
</dialog>

<button commandfor="dialog-warning" command="show-modal" class="btn-warning">Warning</button>
  <dialog class="dialog-warning btn-warning" id="dialog-warning">
  <h3>Heading text</h3>
  <p>Far far away behind the word mountains there lived the blind texts.</p>
  <button commandfor="dialog-warning" command="close">Close</button>
</dialog>

<button commandfor="dialog-secondary" command="show-modal" class="btn-secondary">Secondary</button>
  <dialog class="dialog-secondary btn-secondary" id="dialog-secondary">
  <h3>Heading text</h3>
  <p>Far far away behind the word mountains there lived the blind texts.</p>
  <button commandfor="dialog-secondary" command="close">Close</button>
</dialog>

Previous: Cards

Next: Dropdowns