Dialog Dilemmas and Modal Mischief: A Deep Dive Into Pop-Ups

Rate this content

Our design systems commonly feature components that show on top of other content: tooltips, date pickers, menus and teaching UI, to name just a few. Proposed updates to the web platform are about to make building these a whole lot easier. You might not even need JavaScript. In this talk, you’ll learn all about the upcoming ‘popover’ attribute, modality and the top layer.

10 min
01 Jun, 2023

AI Generated Video Summary

The Talk discusses the use of dialogues and popovers in web development. Dialogues can be modal or non-modal and are now accessibility-supported. Popovers are versatile and can be added to any element without JavaScript. They provide suggestions, pickers, teaching UI, list boxes, and action menus. Modal and non-modal dialogues and popovers have different behaviors and dismissal methods. Browser support for these features is expanding, but there are still open questions about positioning, semantics, and other use cases.

1. Introduction to Dialogues and Popovers

Short description:

I want to chat to you about dialogues and about popovers. The dialogue element and the popover attributes are two things that can help you with putting stuff on top of other stuff in the web. Dialogues have become accessibility-supported and can be used as modal or nonmodal dialogues. Popovers are a new set of behaviors that can be added to any element to create form element suggestions, content pickers, teaching UI, list boxes, and action menus. They work without JavaScript and can be easily created by adding the popover attribute to an element.

I want to chat to you about dialogues and about popovers. Now, we all know that the web used to be just linear, right? We had text and we had images. Increasingly, we like to put stuff on top of other stuff. I'm going to talk to you today about two things that can really help you with that, from the HTML specification.

One is the dialogue element that has been around for a while, and as of recently, it has become quite accessibility-supported as well. Then, secondly, the popover attributes, which is a brand-new attribute coming to the web. It has been put into Chrome just last week and stable Chrome. It is being developed in all of the other browsers as well.

One example of a popover is when you have a bit of UI and you want to explain it to your users. In this case, there's an article from The Economist. They have an audio player, and they show the user, you know, you can click this to listen to your article. You can do all sorts of things with popovers, like the other day when I was in a very serious business meeting and Microsoft Teams told me to use Excel integrations. That's something they do. They've also told me to be my expressive self, my expressive self, by using like an avatar. You can use popovers for all sorts of things. Slack does it slightly better by telling you you look nice when you hover over yourself. I prefer that to the previous one, to be honest.

Now let's look at the differences between dialogues and popovers, starting with the dialogue element. So dialogue is a HTML element, so I'm not talking about just any dialogue that you're building, but the actual element in HTML. It comes with the dialogue role, so semantics are built in, and it has a modal setting. Now the way you use it is in the script, so you can find the element in the DOM and then just call showModal on it. That shows it as a modal dialogue. And then you can also call show, which will do a nonmodal dialogue.

Now popover is a new set of behaviors that you can add to any element that you like. So it's an attribute that you add to an element in order to build things like form element suggestions, content pickers, teaching UI, list boxes, and action menus. And the cool thing about popover is that it works without JavaScript as well. The way you make a popover is basically by slapping the popover attribute onto any element that makes it a popover. Then you give it an ID and then you can point to that ID from a popover-targets attribute on a button. From that moment onward, that button becomes a toggler for your popover. So I've done a really ugly one in this screenshot, but basically you have the button, you have your div, and you can put whatever you like in there.

2. Popover Patterns and Modal vs Non-Modal

Short description:

Popover can be controlled without JavaScript. Modal vs non-modal: modal blocks user interaction, non-modal allows other actions on the webpage. Dismissal methods include explicit dismiss and light dismiss. Layering with Z index controls element stacking. Top layer elements have a separate layer and can't be positioned relative to other elements. Backdrops draw attention and indicate modal status. Top layer elements come with a backdrop. Keyboard focused traps can be used in modals.

It becomes a popover that's controllable without JavaScript. Now, of course, you can also do it in JavaScript. So you can call the show popover method onto your element, and that is also going to show it. Then you can use that if you want to do timed popovers, like Microsoft Teams was doing on me, that one just appeared and disappeared at certain times.

Now, working on popover and dialogues and kind of learning about how they work, I had this question popping into my head, how are these patterns actually different? They seem quite similar. So I wanna take you through a couple of different axes on which they are indeed different.

One is modal versus non-modal. Now, modal means that an element, if it's modal, it is the only thing that the user can interact with. Everything else is blocked, so you cannot select text, you cannot tap, you cannot scroll, ideally. So anything else is impossible, you can just do the modal bits. That's useful when you've decided to track your users, and according to European law, you need to ask for consent. So if you do that, you probably want to use a modal, because you can't really place any cookies before you've asked the permission, and you also don't want your users to go on your website without tracking them, I guess, because that's your goal there.

Non-modal dialogs are things like menus in your applications, like this one, where you're editing an image, and you get some options for that image, or chat widgets that can pop up over your content. Now, they need to be dismissible easily, and it is important you can do other stuff on the webpage, like in this case, I can imagine people just want to go on with booking their trip, and they don't want to talk to you or chat, so you want to make that easy to dismiss. Talking about dismiss, there are different ways of dismissing. One is explicit dismiss, which is what happens when you have a button and you need to click that, or when a script actually removes it, and there is light dismiss, which is some kind of auto-magic dismiss. So when you're choosing a font in Google Docs, you get this list of fonts, but when you kind of start scrolling or you click outside of it, it just disappears. You don't need to do anything special to make it go away.

Then layering. We're probably all familiar with the Z index in CSS. It allows you to stack elements on top of each other and control the order in which that happens. So if you slap Z index one on one element and Z index two on the other, two is going to be above one because it's a higher number, and we've probably all seen very high numbers in our code bases. Now the cool thing about top layer is it happens on top of everything. So the Z indexing happens in your body, and you can see this as a layer that is separate from anything else in your body. It also means that you can't position anything relative to stuff that's not in the top layer.

Then backdrops, they can sometimes be useful to draw attention to certain elements, and for modal elements it also helps to show that they are modal and that the other stuff is currently not available. Top layer elements, they come with a backdrop for free in the browser, and you can style that with colon colon backdrop in your CSS, and you can then do stuff like change the color or add some blur or do all sorts of other things that CSS allows you to do. So that is very useful, and only happens with top layer elements specifically.

And then lastly there are keyboard focused traps. So when you're building a modal, you sometimes want to trap people inside of that modal.

3. Modal and Non-Modal Dialogues and Popovers

Short description:

Modal and non-modal dialogues and popovers have different behaviors and dismissal methods. Popovers and modal dialogues help with layering and backdrops. Keyboard focus traps are available with modal dialogues. Browser support for popovers and dialogues is expanding. Open questions remain about positioning, semantics, and other use cases.

With modals, that's quite common. There are other elements like calendar widgets if they're really complex. You also sometimes want to avoid people tabbing accidentally outside. It's always temporarily. So all these axes, how do they relate to our dialogues and our pop overs? Well the first one, modal, a dialogue would show modal or a modal dialogue is obviously modal, and then a dialogue which shows non-modal and the pop over is as well.

Talking about dismissal, a pop over in the auto mode which is the default will like dismiss whereas a pop over in manual mode will explicitly need to be dismissed. And that's the same for any dialogue that you have. Now talking about z-indexes, pop overs, and modal dialogues, they both go into the top layer whereas everything else you'll need to deal with z-index if you want to put it on top of other stuff. And that can easily get quite complicated if you have a lot of components on a page and you don't know beforehand which ones are going to be there. Let's say you have a tooltip open but you also have a modal overlay that tells the user they're about to time out. You don't want that tooltip to be on top of your modal overlay. So all sorts of concerns there that pop over and modal dialogues help you with.

Then backdrops, they come for free as I mentioned with top layer elements. So again, that comes with pop over and with modal dialogues. But if you're adding them to pop overs, maybe you actually want to build a modal dialogue because if you're not going to make everything else unavailable, why obscure it with a backdrop? Now something to think about, there are use cases but they are not very common. Then lastly, keyboard focus traps. You get those for free with modal dialogues. So if you have a dialogue element that you open with, show modal.

Now there are two, or one post that I wanted to share specifically about popovers and dialogues, which goes into that whole top layer story by Adrian Roselli. I recommend reading that. I also want to briefly mention browser support. So as I mentioned, popover just chipped in Stable Chrome. It's also coming to Edge because that's based on Chromium 2 and then it is coming to Safari because it's already in tech preview and Firefox are working on implementing it as well together with Daigalia. Dialogue is supported pretty much everywhere. I have some comparisons here in my slides, but I'll refer you to the slides that I'll make available afterwards. I want to leave you with a few open questions that we still have that we're still working on at Open UI for popover. Positioning, you can use a JS library now and anchor positioning in the future. Semantics, I did a blog post specifically about that and other use cases like tool tips and an async variant. That's all for me. I'm HTV Everywhere, and I'll be posting these slides on my socials later.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Advanced Conference 2021React Advanced Conference 2021
47 min
Design Systems: Walking the Line Between Flexibility and Consistency
Design systems aim to bring consistency to a brand's design and make the UI development productive. Component libraries with well-thought API can make this a breeze. But, sometimes an API choice can accidentally overstep and slow the team down! There's a balance there... somewhere. Let's explore some of the problems and possible creative solutions.
TestJS Summit 2021TestJS Summit 2021
30 min
Configuring Axe Accessibility Tests
Axe-core is a popular accessibility testing engine that is used Google, Microsoft, and hundreds of other companies to ensure that their websites are accessible. Axe-core can even integrate into many popular testing frameworks, tools, and IDEs. In this advanced session, we'll be learning how to configure axe and its integrations to fine tune how it runs and checks your pages and code for accessibility violations.
React Summit 2022React Summit 2022
27 min
Walking the Line Between Flexibility and Consistency in Component Libraries
Design systems aim to bring consistency to a brand's design and make the UI development productive. Component libraries with well thought API can make this a breeze. But, sometimes an API choice can accidentally overstep and slow the team down! There's a balance there... somewhere. Let's explore some of the problems and possible creative solutions.
React Summit 2022React Summit 2022
20 min
Find Out If Your Design System Is Better Than Nothing
Building a design system is not enough. Your dev team has to prefer it over one-off components and third-party libraries. Otherwise, the whole effort is a waste of time. Learn how to use static code analysis to measure if your design system wins over the internal competition and data-driven ways to improve your position.

Workshops on related topic

React Summit 2023React Summit 2023
109 min
Web Accessibility for Ninjas: A Practical Approach for Creating Accessible Web Applications
In this hands-on workshop, we’ll equip you with the tools and techniques you need to create accessible web applications. We’ll explore the principles of inclusive design and learn how to test our websites using assistive technology to ensure that they work for everyone.
We’ll cover topics such as semantic markup, ARIA roles, accessible forms, and navigation, and then dive into coding exercises where you’ll get to apply what you’ve learned. We’ll use automated testing tools to validate our work and ensure that we meet accessibility standards.
By the end of this workshop, you’ll be equipped with the knowledge and skills to create accessible websites that work for everyone, and you’ll have hands-on experience using the latest techniques and tools for inclusive design and testing. Join us for this awesome coding workshop and become a ninja in web accessibility and inclusive design!
TestJS Summit 2021TestJS Summit 2021
85 min
Automated accessibility testing with jest-axe and Lighthouse CI
Do your automated tests include a11y checks? This workshop will cover how to get started with jest-axe to detect code-based accessibility violations, and Lighthouse CI to validate the accessibility of fully rendered pages. No amount of automated tests can replace manual accessibility testing, but these checks will make sure that your manual testers aren't doing more work than they need to.
React Summit 2022React Summit 2022
161 min
Web Accessibility in JavaScript Apps
Often we see JavaScript damaging the accessibility of a website. In this workshop, you’ll learn how to avoid common mistakes and how to use JS in your favor to actually enhance the accessibility of your web apps!
In this workshop we’ll explore multiple real-world examples with accessibility no-nos, and you'll learn how to make them work for people using a mouse or a keyboard. You’ll also learn how screen readers are used, and I'll show you that there's no reason to be afraid of using one!
Join me and let me show you how accessibility doesn't limit your solutions or skills. On the contrary, it will make them more inclusive!
By the end, you will:- Understand WCAG principles and how they're organized- Know common cases where JavaScript is essential to accessibility- Create inclusive links, buttons and toggleble elements- Use live regions for errors and loading states- Integrate accessibility into your team workflow right away- Realize that creating accessible websites isn’t as hard as it sounds ;)
React Advanced Conference 2022React Advanced Conference 2022
118 min
Rapid UI Development in React: Harnessing Custom Component Libraries & Design Systems
In this workshop, we'll take a tour through the most effective approaches to building out scalable UI components that enhance developer productivity and happiness :-) This will involve a mix of hands-on exercises and presentations, covering the more advanced aspects of the popular styled-components library, including theming and implementing styled-system utilities via style props for rapid UI development, and culminating in how you can build up your own scalable custom component library.
We will focus on both the ideal scenario---where you work on a greenfield project---along with tactics to incrementally adopt a design system and modern approaches to styling in an existing legacy codebase with some tech debt (often the case!). By the end of the workshop, you should feel that you have an understanding of the tradeoffs between different approaches and feel confident to start implementing the options available to move towards using a design system based component library in the codebase you work on.
Prerequisites: - Familiarity with and experience working on large react codebases- A good understanding of common approaches to styling in React
React Summit Remote Edition 2021React Summit Remote Edition 2021
91 min
Creating Accessible React Native Apps
React Native is a framework used to create native iOS and Android apps in a way web developers may already be familiar with. But how do you ensure your React Native apps are inclusive and usable everyone? Scott will share tips on how to test and build React Native apps with accessibility baked-in!