Dialog overlays for focused user interactions like forms, confirmations, and alerts.
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>
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.
This is a smaller modal for compact content.
This is a larger modal for more detailed content.
Large modals are useful for forms, detailed information, or multi-step workflows.