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

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.

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.

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.