modal Component
Modal System
The modal system provides a simple way to display overlays with content. It requires three parts:
- Trigger Button - A button with
data-modal="modal-id"attribute - Modal HTML - The modal structure with matching
id="modal-id" - JavaScript - Automatically loaded via
hygge.core.js(no setup needed!)
Basic Modal
Modal Sizes
Tiny Modal
Small Modal
Large Modal
Big Modal
Status Modals
Success Modal
Warning Modal
Error Modal
Info Modal
Note: Modals support all color variants (red, blue, purple, etc.) but semantic colors (positive, negative, warning, info) are recommended for clarity.
Complete Examples
Basic Modal - Full Implementation
<!-- 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
// 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
// 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
// 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');
}
});