Modals – 8 Free CSS, Bootstrap & Tailwind Sets
A pack of eight modal dialog sets, designed and maintained in-house by uiCookies: everyday header, body and footer modals in three sizes, confirmation and success popups, login, newsletter and feedback forms, a lightbox and video player, bottom and side sheets, onboarding steps, a dark command palette and a set built only on current HTML and CSS. Every set comes three ways: a Bootstrap 5.3.8 version that uses Bootstrap's own Modal plugin, a plain CSS version built on the native dialog element, and a Tailwind CSS 4 version written in utility classes. Pick the one that matches your stack and copy the marked snippet.
A good modal is one the reader can always get out of. It needs a visible heading that names it, Esc and a labelled close button that work every time, and keyboard focus that moves into the dialog when it opens, cannot wander onto the page behind, and goes back to the button that opened it when it closes. It should stop the page scrolling underneath, fit a 375px phone without sideways scrolling, and keep its footer buttons in reach when the body is long. A destructive action deserves a confirmation that says exactly what will be lost, and a prompt the reader did not ask for, such as a newsletter popup, should be easy to dismiss and never block the page before it has been read.
