Skip to content

Commit

Permalink
Fix incorrect statement about dialog top-layer placement (#31866)
Browse files Browse the repository at this point in the history
  • Loading branch information
chrisdavidmills authored Jan 23, 2024
1 parent afe8942 commit f8730b4
Showing 1 changed file with 1 addition and 1 deletion.
2 changes: 1 addition & 1 deletion files/en-us/web/api/popover_api/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ A very common pattern on the web is to show content over the top of other conten
- **modal**, meaning that while a popover is being shown, the rest of the page is rendered non-interactive until the popover is actioned in some way (for example an important choice is made).
- **non-modal**, meaning that the rest of the page can be interacted with while the popover is being shown.

Popovers which are created using the popover API are always non-modal. If you want to create a modal popover, a {{htmlelement("dialog")}} element is the right way to go, although bear in mind that `<dialog>` elements are not put in the {{glossary("top layer")}} by default — popovers are. There is significant overlap between the two — you might for example want to create a popover that persists, but control it using declarative HTML. You can even turn a `<dialog>` element into a popover if you want to combine popover control and top level placement with dialog semantics.
Popovers created using the Popover API are always non-modal. If you want to create a modal popover, a {{htmlelement("dialog")}} element is the right way to go. There is significant overlap between the two — you might for example want to create a popover that persists, but control it using declarative HTML. You can turn a `<dialog>` element into a popover (`<dialog popover>` is perfectly valid) if you want to combine popover control with dialog semantics.

Typical use cases for the popover API include user-interactive elements like action menus, custom "toast" notifications, form element suggestions, content pickers, or teaching UI.

Expand Down

0 comments on commit f8730b4

Please sign in to comment.