Popver API VS dialog Modal : Same Same but Different

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 <dialog> for:

• Modal popups requiring user focus
• Accessibility and keyboard interaction

Choose popover for:

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

<dialog> 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.

<dialog> 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.

<button popovertarget="mypopover">Toggle the popover</button>
<div id="mypopover" popover>Popover content</div>

Main difference between popover and <dialog> element

The main difference between the popover and <dialog> elements is that popover is always non-modal. The <dialog> element comes with a role=dialog attribute this role attribute is attached to various HTML elements and behaves in a certain way. i.e. h1 has a heading role a has an anchor/Link role. This role is used to determine and help assistive technologies such as screen readers to determine the elements. However, the popover is an attribute to an HTML element as it has no default role attached to it. This helps the <div> in the above example to be hidden until the button is clicked.

The popover attribute can be used with minimal code and while it can be controlled using Javascript it is not required at all times like the <dialog>.

popover can have 2 characteristics:
1.popover=auto: Has functionality for light-dismissal and requires no JS interaction.
2.popover=manual: Needs Javascript interaction such as clicking a button or timer to explicitly close it.

popover is always shown at the top-layer no need to set z-index explicitly.

Code Example:

You can see I can achieve the same behavior with almost no Javascript code. Designing and managing various popover is much easier.

Some Design considerations

popover can have : backdrop set using CSS which can be used to blur or grey out the background of the popover but that does not take-away the light-dismissal functionality of it, and still user can click outside if the pop-up and interact with other elements of your web-page. You should be very careful while determining when to choose popover over <dialog>.

The main thing to consider here is: is the component being displayed the only thing that should have focus at the moment? can user be allowed to interact with anything else?

Conclusion

In conclusion, the element and the popover API offer versatile options for creating interactive popups in your web applications. By understanding their distinct characteristics and use cases, you can make informed decisions to enhance user experience and streamline your development process.

References

1. Comparing the Popover API and the element
2. Dialogs and popovers seem similar. How are they different?
3. Popover API lands in Baseline