I was reading through some tech news blogs and stumbled upon the heading Popover API lands in Baseline. I was confused, during my recent dive into front-end development, I recently with a very hard time getting accustomed to using Elements in HTML. While going over the blog I was constantly confused as to how was I using the element up until now.

TL;DR

Choose

• Modal popups requiring user focus
• Accessibility and keyboard interaction

Choose popover for:

• Non-modal popups with light-dismissal
• Easy implementation with minimal code

element

According to the MDN The Dialog element

The HTML element represents a modal or non-modal dialog box or other interactive component, such as a dismissible alert, inspector, or subwindow.

A is generally used and displayed over the content when the website needs to draw the attention of the user to something important. i.e. Subscribing to a newsletter, requesting(more like forcing) to disable the adblocker, or accepting terms and conditions.

element as Modal

As you might have come across multiple times on multiple websites, some of these popups will be drawn on your entire screen while blurring the background or disabling the background and focusing the user only on the task at hand, the user must either dismiss(only if allowed) the popup or enter the required information for it to go away. This behavior is called the ' element as a modal'. These Modal elements are shown at the top layer of the page.

//To open dialog as a modal.

dialog.showModal();

// To close the dialog.

dialog.close();

element when shown using the showModal() method can be dismissed using the esc key. Keyboard users expect such behaviour which needs to be maintained and is provided by the browser. If multiple modal dialogs are open, only the last dialog will be closed using the esc key.

element as non-modal

You might not always want to stop the user's natural flow of using your webpage, to stop doing everything else and focus on what you want to show but still your content, such as a toast notification, a cookie consent, or general tooltip info. should appear at the top layer of the page, above any other content that can or can not be interacted with by the user. These types of pop-ups are called non-modal pop-ups. Users can dismiss these manually or generally time and will disappear on their own. These non-modal dialogs are still shown at the top layer of the page but their priority can be controlled using the z-index and the modal element will take a higher z-index than this and will make this non-accessible.

//To open dialog as a modal.

dialog.show();

// To close the dialog.

dialog.close();

Code Example

Some Issues

I had hard time grasping the working and usage of non-modal elements. According to me the non-modal element behaved inconsistently and needed Javascript code to handle situations such as:

• There's no light dismissal functionality. Clicking outside the model will not close the .
• esc key does not dismiss the and needs Javascript to handle that scenario.
• need to manage z-index manually if you want to draw the on top layer.

To my surprise popover API answered or fixed these issues and more....

popover API

popover are attribute that can be added to any HTML attribute. Here's an example.

Toggle the popover
Popover content

Main difference between popover and

element

The main difference between the popover and