📦 Modaling.js

A modern, accessible modal system with rich animations and features

View on GitHub

🎨 Rich Animations

Multiple built-in animations with smooth transitions

♿️ Accessibility

ARIA support and keyboard navigation

🔗 URL Support

Modal state preserved in URL hash

📱 Responsive

Works great on all devices

Basic Examples

Animation Examples

Usage Example


// Basic initialization
const modal = new Modaling({
    id: 'my-modal',
    animation: 'zoom',
    size: 'md',
    closeOnOverlay: true,
    closeOnEscape: true
});

// Show the modal
modal.show();

// Hide the modal
modal.hide();

// Data attributes usage
<button 
    data-modal-target="my-modal"
    data-modal-animation="zoom"
    data-modal-size="lg"
>
    Open Modal
</button>

Basic Modal

This is a basic modal example with default settings.

Zoom Animation

This modal uses the zoom animation effect.

Large Modal

This is a large-sized modal example.

Roadrunner Animation

Beep beep! Watch this cool animation.

Flip Animation

This modal flips into view!

Door Animation

Open sesame!

Unfold Animation

Watch this modal unfold smoothly.

Rotate Animation

Round and round we go!