naUI - Not Another UI Framework

Basic modal

Modals are triggered by na-modal-open and closed with na-modal-close.

<!-- Trigger -->
<button class="na-button na-button-primary" na-modal-open="#my-modal">Open</button>

<!-- Modal markup (place at end of body) -->
<div class="na-modal-overlay" id="my-modal">
  <div class="na-modal" role="dialog" aria-modal="true">
    <div class="na-modal-header">
      <h5 class="na-modal-title">Title</h5>
      <button class="na-modal-close" na-modal-close aria-label="Close">&times;</button>
    </div>
    <div class="na-modal-body">...</div>
    <div class="na-modal-footer">
      <button class="na-button na-button-ghost" na-modal-close>Cancel</button>
      <button class="na-button na-button-primary">Confirm</button>
    </div>
  </div>
</div>

Sizes

<div class="na-modal na-modal-s">...</div>
<div class="na-modal na-modal-m">...</div>   <!-- default -->
<div class="na-modal na-modal-l">...</div>
<div class="na-modal na-modal-xl">...</div>
<div class="na-modal na-modal-full">...</div>

Class reference

Class / Attribute	Description
`na-modal-overlay`	Full-screen backdrop layer
`na-modal`	Centred dialog box
`na-modal-xs / s / m / l / xl / 2xl / 3xl / full`	Width sizes
`na-modal-header / body / footer`	Structural slots
`na-modal-title`	Dialog heading
`na-modal-close`	Close ? button
`na-modal-footer-start / --between`	Footer alignment
`na-modal-open="#id"`	Trigger attribute
`na-modal-close`	Close trigger attribute