OpenModal

A lightweight, framework-agnostic modal library powered by animate.css

Try Demos Read Docs View on GitHub

Features

Zero Dependencies

Pure ES6 class with no runtime dependencies. Just you, animate.css, and your markup.

Framework-Agnostic

Works with Bootstrap, Materialize, Tailwind CSS, or your own custom styles.

17 Animation Pairs

Separate entry and exit animations for both backdrop and content. Mix and match freely.

Fully Configurable

Customize IDs, classes, colors, effects, and triggers via a simple options object.

ES6 Module

Import as a standard ES6 module. Works with Webpack, Vite, Rollup, or directly in the browser.

Material Ripple

Optional click ripple effect using the vendored node-waves library.

Live Demos

Standard Modal

Data entry form with customer details table. Uses bounceInUp/bounceOutUp effects.

Bootstrap Style

Familiar Bootstrap-like dialog with fadeInDown/fadeOutUp effects.

Materialize Style

Material Design inspired modal with zoomIn/zoomOut effects.

Modern Style

Sleek modern dialog with jackInTheBox/hinge effects.

Animation Effects

Click Preview to test any effect on the modal below

Category Effect Description In / Out