10
2

A popover backdrop anti-pattern

1mon 9d ago by programming.dev/u/codeinabox in webdev@programming.dev from remysharp.com

For what it's worth, the Popover documentation is very explicit that <dialog> is the only right tool for the job when you want a modal:

  • 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 created using the Popover API are always non-modal. If you want to create a modal popover, a <dialog> element is the right way to go.

Both examples have the same behavior for me on firefox mobile. So their solution isn't universal for all browsers :(