Pico’s modal pattern is the native <dialog> wrapping an article. Headers can include a close button with rel="prev" (Pico floats it top-right); footers align action buttons to the end.
Opening and closing
Add the open attribute for static previews in the playground. In apps, call showModal() and close() on the element. Optional utility classes on html—modal-is-open, modal-is-opening, modal-is-closing—control scroll lock and animations (not available in classless CSS).
Compared to Bootstrap modals
Bootstrap needs data-bs-toggle and a large markup tree. Pico styles semantic dialog markup; you own the small script layer—same trade-off as other CSS-only frameworks.
Important interview questions and answers
- Q: Why prefer
dialogover a styleddivoverlay?
A: Built-in top layer, focus management hooks, and standardized close behavior withshowModal()/close(). - Q: Does Pico provide modal JavaScript?
A: No—only CSS; you wireHTMLDialogElementor a framework equivalent.
Self-check
- Which child element carries the modal title and close control?
- What method opens a modal in the top layer?
Challenge
Native dialog
- Use
<dialog>with a trigger button. - Open with
showModal()in a tiny inline script if needed.
Done when: dialog opens with Pico styling and closes via the native close control.