Modal

Dialog overlays for confirmations, checkout review, previews, and focused application tasks.

Each example uses Sass v2 classes directly while the page still renders through the normal Header/Body/Footer service_3_modern section.

Component

Default modal

Modal HTML stays in the page and JS toggles the active state.

Component

Default modal html

<div class="antsand-modal active">
  <div class="antsand-modal-dialog">
    <div class="antsand-modal-header"><h3>Title</h3></div>
    <div class="antsand-modal-body">Content</div>
    <div class="antsand-modal-footer">Actions</div>
  </div>
</div>

Modal sizes

Use size modifiers on the root modal for small, large, XL, or fullscreen dialogs.

antsand-modal-smantsand-modal-lgantsand-modal-xlantsand-modal-fullscreen

Component

Modal sizes html

<div class="antsand-modal antsand-modal-lg">...</div>

The live examples and code samples are stored in databoard.menu, mapped into api_data, and rendered by the shared H/B/F template.

Data mapping json

{"api_data": [["api_data"], ["databoard", "menu", "stylesdoc_component_modal"]]}

ANTSAND

Framework

Integration

Ecosystem

Modal

Default modal

Confirm deployment

Modal sizes

Data-first component docs

ANTSAND

Framework

Integration

Ecosystem