Modal
Modal dialogs for focused user interactions. Includes backdrop, focus trap, and keyboard navigation.
Basic Modal
A modal dialog with header, body, and footer. Click backdrop or press ESC to close.
<!-- Trigger button -->
<button data-ui-toggle="modal" data-ui-target="#myModal">
Open Modal
</button>
<!-- Modal structure -->
<div id="myModal" class="ui-modal">
<div class="ui-modal__backdrop" data-ui-dismiss="modal"></div>
<div class="ui-modal__dialog">
<div class="ui-modal__content">
<div class="ui-modal__header">
<h5 class="ui-modal__title">Modal Title</h5>
<button class="ui-modal__close" data-ui-dismiss="modal">×</button>
</div>
<div class="ui-modal__body">
Modal content goes here.
</div>
<div class="ui-modal__footer">
<button class="ui-btn ui-btn--secondary" data-ui-dismiss="modal">Cancel</button>
<button class="ui-btn ui-btn--primary">Save</button>
</div>
</div>
</div>
</div>Modal Sizes
Different sizes for various content needs.
<!-- Small -->
<div class="ui-modal__dialog ui-modal__dialog--sm">...</div>
<!-- Default (no modifier) -->
<div class="ui-modal__dialog">...</div>
<!-- Large -->
<div class="ui-modal__dialog ui-modal__dialog--lg">...</div>
<!-- Fullscreen -->
<div class="ui-modal__dialog ui-modal__dialog--fullscreen">...</div>Static Backdrop
Prevent closing when clicking backdrop. Use for important dialogs.
<div id="staticModal" class="ui-modal" data-ui-backdrop-static>
<!-- Cannot be closed by clicking backdrop -->
</div>Centered Modal
Vertically center the modal in the viewport.
<div class="ui-modal__dialog ui-modal__dialog--centered">
...
</div>Scrollable Content
For long content, the modal body becomes scrollable.
<div class="ui-modal__dialog ui-modal__dialog--scrollable">
<div class="ui-modal__content">
<div class="ui-modal__body">
<!-- Long content here -->
</div>
</div>
</div>Programmatic Control
Open and close modals via JavaScript.
import { showModal, hideModal } from '@wilout/ui-js';
// Open modal
showModal('#myModal');
// Close modal
hideModal('#myModal');
// Listen to events
document.addEventListener('ui:modal:shown', (e) => {
console.log('Modal opened');
});
document.addEventListener('ui:modal:hidden', (e) => {
console.log('Modal closed');
});Events
| Event | Description |
|---|---|
ui:modal:show |
Fired before modal opens (cancelable) |
ui:modal:shown |
Fired after modal is fully visible |
ui:modal:hide |
Fired before modal closes (cancelable) |
ui:modal:hidden |
Fired after modal is fully hidden |
Data Attributes
| Attribute | Description |
|---|---|
data-ui-toggle="modal" |
Marks element as modal trigger |
data-ui-target="#id" |
Target modal selector |
data-ui-dismiss="modal" |
Closes the modal when clicked |
data-ui-backdrop-static |
Prevents closing on backdrop click |
Accessibility
- Focus is trapped inside the modal when open
- Press Escape to close (unless static backdrop)
- ARIA attributes (
role="dialog",aria-modal="true") are automatically added - Focus returns to trigger element when closed
- Body scroll is locked when modal is open