Modal

Dialog overlays for focused user interactions like forms, confirmations, and alerts.

Modal Dialog

Trigger modals with data-modal-open attribute

<!-- Trigger Button -->
<button data-modal-open="myModal" class="antsand-btn antsand-btn-primary">
    Open Modal
</button>

<!-- Modal Structure -->
<div id="myModal" class="antsand-modal">
    <div class="antsand-modal-dialog">
        <div class="antsand-modal-content">
            <div class="antsand-modal-header">
                <h3>Modal Title</h3>
                <button class="antsand-modal-close">×</button>
            </div>
            <div class="antsand-modal-body">
                <p>Modal content goes here.</p>
            </div>
            <div class="antsand-modal-footer">
                <button class="antsand-btn antsand-btn-secondary">Close</button>
                <button class="antsand-btn antsand-btn-primary">Save</button>
            </div>
        </div>
    </div>
</div>

Demo Modal

This is a demo modal dialog. Click the X button, click outside, or press ESC to close.

Modals are great for forms, confirmations, and focused interactions.

Small Modal

This is a smaller modal for compact content.

Large Modal

This is a larger modal for more detailed content.

Large modals are useful for forms, detailed information, or multi-step workflows.

  • More space for content
  • Better for complex forms
  • Good for data tables