Modal (pop-up window) generator with dialog

Modal (pop-up window) generator with dialog: what it is for

Modal windows are for confirming an action, showing a short form or highlighting a call to action without taking the visitor off the page. Hand-made with divs, they usually fail with the keyboard and screen readers.

This generator uses the dialog element with showModal(), supported by all current browsers since 2022: the browser places the window on top, makes the rest of the page inert, traps focus, closes on Esc and returns focus to the button. The code adds the styling, click-outside to close and a smooth entrance with @starting-style that respects people who prefer less motion.

How to use

1. Write the title, text and buttons.
2. Choose the color, width and corners.
3. Test it in the preview and copy the code.

When to use it

• Call to book an appointment.
• Confirmation before an action.
• Announcement or short form.

Frequently asked questions

Why use the dialog element?

With showModal() the browser places the window above everything, makes the rest of the page inert, traps focus inside it, closes on Esc and returns focus to the button that opened it. This used to take a lot of JavaScript and almost always ended up with accessibility flaws.

Does it work in every browser?

Yes, dialog has been supported by Chrome, Edge, Firefox and Safari since 2022. The entrance animation uses @starting-style, which older browsers simply ignore: the window opens without animation.

Can I open the modal automatically when someone visits?

You can, but pop-ups that open without the visitor asking tend to annoy, and on mobile Google may demote pages with intrusive interstitials that cover the content. Prefer opening it from a button.

Is it really free?

Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.

Similar tools