|$ curl https://forge-ai.dev/api/markdown?path=docs/html/dialog-popover
$cat docs/dialog-&-popover-api.md
updated Recently·20 min read·published
Dialog & Popover API
◆HTML◆API◆Intermediate
Introduction
The <dialog> element and the Popover API provide native, accessible ways to create modal dialogs, non-modal overlays, tooltips, and popovers without external libraries. Both are built into modern browsers and handle focus management, keyboard navigation, and accessibility automatically.
The Dialog Element
The <dialog> element represents a dialog box or other interactive component. It can be modal (blocks interaction with the rest of the page) or non-modal.
dialog-basic.html
HTML
| 1 | <dialog id="myDialog"> |
| 2 | <p>This is a dialog window.</p> |
| 3 | <button onclick="this.closest('dialog').close()">Close</button> |
| 4 | </dialog> |
| 5 | |
| 6 | <button onclick="document.getElementById('myDialog').showModal()"> |
| 7 | Open Modal |
| 8 | </button> |
Popover API
The Popover API provides a declarative way to create popovers — overlay elements that appear above other content. Use popover attribute for basic popovers or popover="manual" for custom toggle behavior.
popover-basic.html
HTML
| 1 | <button popovertarget="myPopover">Toggle Popover</button> |
| 2 | |
| 3 | <div id="myPopover" popover> |
| 4 | <p>This content appears in a popover.</p> |
| 5 | <button popovertarget="myPopover" popovertargetaction="hide"> |
| 6 | Close |
| 7 | </button> |
| 8 | </div> |
ℹ
info
The Popover API handles top-layer rendering, light-dismiss (clicking outside closes it), and focus trapping automatically. No JavaScript required for basic cases.