The HTML popover attribute is a native modal system made possible through HTML and JavaScript specifications. In this article by David Walsh, we're shown how to use the `popover` attribute to create modal components and display display content in them.

Key points

• Use the `popover` attribute in conjunction with the `popovertarget` attribute to simplify the creation of native HTML modals.

• Native popover enhances UX by providing a standardized and efficient method for displaying modal content.

• Developers can leverage the native modal system to optimize UI on both desktop and mobile devices.

Codepen example

Highlights

Unfortunately most developers don't know that the HTML and JavaScript specs have implemented a native modal system via the `popover` attribute

Creating a native HTML modal consists of using the `popovertarget` attribute as the trigger and the `popover` attribute, paired with an `id`, to identify the content element.