modal Component

Complete Examples

Basic Modal - Full Implementation

Preview Code
Copy
<!-- Trigger Button --> <button class="button primary" data-modal="my-modal"> Open Modal </button> <!-- Modal HTML (place at end of body) --> <div id="my-modal" class="modal-overlay hidden" aria-hidden="true"> <div class="modal"> <div class="header"> <div> <h3 class="title">Confirm Action</h3> <p class="description">Are you sure you want to proceed?</p> </div> <button class="button close" aria-label="Close"> <i class="icon x w-5 h-5"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <line x1="18" y1="6" x2="6" y2="18"></line> <line x1="6" y1="6" x2="18" y2="18"></line> </svg> </i> </button> </div> <div class="content"> <p>This action cannot be undone. All data will be permanently deleted.</p> </div> <div class="footer"> <button class="button ghost">Cancel</button> <button class="button negative">Delete</button> </div> </div> </div>

JavaScript API

Opening Modals Programmatically

Preview Code
Copy
// Open a modal using JavaScript Modal.open('my-modal'); // Close a modal Modal.close('my-modal'); // Close all open modals Modal.closeAll(); // jQuery integration (if jQuery is loaded) $('#my-modal').modal('open'); $('#my-modal').modal('close');

Modal Events

Preview Code
Copy
// Listen for modal events document.getElementById('my-modal').addEventListener('modal:open', function(e) { console.log('Modal opened:', e.detail.modalId); }); document.getElementById('my-modal').addEventListener('modal:close', function(e) { console.log('Modal closed:', e.detail.modalId); });

Custom Modal Trigger

Preview Code
Copy
// Create your own trigger logic document.getElementById('custom-trigger').addEventListener('click', function() { // Do something before opening if (confirm('Are you ready to open the modal?')) { Modal.open('my-modal'); } });