Click the preview button
See the overlay and dialog animate open with your chosen style.
CSS Modal Generator
Build a styled modal or dialog popup with your own content and animation, then copy the ready-to-use HTML, CSS and JavaScript.
Ready-to-use HTML + CSS + JS
How it works
Edit the content
Set the title, body text, button label and entrance animation.
Copy the code
Get a self-contained, accessible modal for your own project.
FAQ
How does the modal open and close?
A trigger button adds an "open" class to the modal overlay, which CSS transitions handle for opacity and transform. Clicking the overlay or the close button removes the class.
Does clicking outside the modal close it?
Yes, clicking the dimmed overlay background closes the modal, while clicking inside the modal box itself does not, thanks to a simple event target check.
Is the modal accessible to screen readers?
The generated markup uses role="dialog" and aria-modal="true" on the modal box, which helps assistive technology understand it as a dialog.