Modals

2.0.2

Powerful, CSS-only dialog system using data-attributes and transitions.

Installation

Full Bundle (via UNPKG)

<link rel="stylesheet" href="https://unpkg.com/axis-twelve@2.0.2/dist/axis-twelve.min.css">

Module Only (via UNPKG)

<link rel="stylesheet" href="https://unpkg.com/axis-twelve@2.0.2/dist/modules/axis-modals.min.css">

Class Reference

.ax-modalBase

Main container. Controlled by data-open.

.ax-modal__backdropElement

The semi-transparent overlay.

.ax-modal__dialogElement

The actual modal box.

.ax-modal__headerElement

Header with close button.

.ax-modal__bodyElement

Main content area.

.ax-modal__footerElement

Footer for action buttons.

.ax-modal__dialog--smModifier

Small modal width (300px).

.ax-modal__dialog--lgModifier

Large modal width (800px).

Live Examples

Confirmation Dialog

A structured modal with header, body, and action buttons in the footer.

Preview: Confirmation Dialog

Source Code

html

<div class="ax-modal" data-open="true" style="display: block !important; position: relative !important; z-index: 1; opacity: 1 !important; visibility: visible !important;">
  <div class="ax-modal__backdrop" style="position: absolute !important; border-radius: 0.75rem; display: block !important; opacity: 1 !important; visibility: visible !important;"></div>
  <div class="ax-modal__dialog ax-modal__dialog--sm ax-p-0 ax-m-auto ax-relative" style="display: block !important; opacity: 1 !important; visibility: visible !important;">
    <div class="ax-modal__header ax-p-4 ax-border-b">
      <h3 class="ax-text-lg ax-font-bold">Discard Changes?</h3>
    </div>
    <div class="ax-modal__body ax-p-4">
      <p class="ax-text-sm ax-text-gray-600">You have unsaved changes. Are you sure you want to leave this page?</p>
    </div>
    <div class="ax-modal__footer ax-p-4 ax-border-t ax-flex ax-justify-end ax-gap-2">
      <button class="ax-btn ax-btn--sm">Stay</button>
      <button class="ax-btn ax-btn--primary ax-btn--sm">Discard</button>
    </div>
  </div>
</div>

♿ Accessibility Guidelines

•Add role="dialog" and aria-modal="true"
•Use aria-labelledby for the title
•Focus trap recommended via minimal JS

Module Evolution

Version	Type	Description
v2.0.1	Internal	Refactored modal pacing and alignment to use logical properties.

← Previous

Tables

Tooltips