Diving Into the Toplayer: Where Dialogs, Popovers, and Modals Live

Hello JS Nation. I'm so glad that you joined my online talk this year as well, my second year in a row to be on for the JS Nation US. So I'm glad to be here. We are going to talk about the top layer. We're going to dive into the top layer and we'll talk about dialogues, popovers, and models. So let's go.

And I want to take you back to a time where the web was more simple and when the web was flat, used to be flat, so no dynamic content, fancy animations, popups, popovers. Today the web can overlap and it does so a lot, I would say. We have models, popovers as well, dynamic content that pops up into the browser all of a sudden. And I brought a video as well as somewhat of an explanation.

This is already a little bit of an older video. It's from 2021. It says browsing the web in 2021, but I think it's still relevant today. Let me open it and see if you notice some things. And I will pause right here. So at the peak overlay, I would say, so what did we see? That this was actually a blog page and there was also some content in the middle. But there are, of course, a lot of ads, video ads, ads popping up in the middle of us browsing the page, two of them on the right and on the left. Of course, we had two banners as well.

So a register banner to register to this blog and, of course, the cookie banner. And then at the end, another model dialogue that popped up and it says, of course, sign on to my daily newsletter. So there are lots of overlay implementations on this webpage. All relatively newer features on the web, I would say. So yeah, there are definitely ways not to implement overlays. I also brought this video. This is an interview by Lex Friedman. He has DHH on, the creator of Ruby on Rails, and he talks about cookie banners. The thing that really gets me about cookie banners too, it's not just the EU, it's the entire world. You can't hide from cookie banners anywhere on this planet. If you go to god damn Mars on one of Elon's rockets and you try to access a webpage, you'll still see a cookie banner. No one in the universe is safe from this nonsense.

Probably the interface on the rocket. It's even slower. You'll have basically 150 second ping time. So it'll take you 45 seconds just to get through the cookie banners from Mars. Yeah. So cookie banners, models, dynamic ads. I think these are all actually awful UI element features today in the web space.

What my talk is about is about giving you the history of how the top layer came to be, why the dialogues and popovers are now in the top layer. And I'm going to give you also the basics to try to set you up for success on how to implement models and popovers.

My name is Tim Dame. I'm a frontend chapter lead at the ABN AMRO, that's a Dutch bank. And I'm also accessibility leader, and I advocate a lot for accessibility. In this talk, we will focus on the what, the why, and the how of content that overlaps other content focusing on the dialogue and the pop art.

And we are holding a successful WCAG 2.2 AA audit, which we were, of course, very proud on. We received this about a couple of months ago. So yeah, we worked hard together with lots of other teams to achieve this, which is, I think, a really nice achievement, really happy about it.

I'm also hosting a podcast called Focus Trap. It's about digital accessibility and web development. I'm a husband and proud father of a daughter. And when I'm not behind the laptop, I like to go outdoors for some sports or outdoor adventures.

In this talk, we will focus on the what, the why, and the how of content that overlaps other content focusing on the dialogue and the pop art. Let's start with the dialogue. So the dialogue is an HTML element. It's a native dialogue element that can be used to create a model dialogue or a non-model dialogue. And of course, more about the differences during later slides.

What's nice, you know, is that the dialogue now is implemented in all major browsers. So it's supported in all major browsers for a long time. Actually, from 2014 till 2022, this was not the case. It was only implemented in Chrome for a long time. And that's also why the dialogue was not really used.

Another reason why it was not really used because at that time, it was not really an accessible option. So there were lots of accessibility issues with the dialogue. And then from 2020, 2022 onwards, when Firefox and Safari also supported, started to support the dialogue. That's also at that time when the dialogue started to be implemented in the top layer. More about that later. Is when it also became more of an accessible option. And if you would like more information about the accessibility issues surrounding the dialogue element, then I've linked two blog posts by Scott in this page. I would definitely check it out if you have the time.

And then the popover. So the popover is an HTML attribute. It's relatively new. And it's an API in HTML that allows you to create popovers, tool tips, or other overlay content. And it's also supported in all major browsers.

So this is relatively new, like I said. April last year was when Firefox was the last one to implement it. And what's nice to know is that accessibility was baked in from the start. And that the popover was proposed by the Open UI Group, which is a group within W3C.

And I brought some examples. So the first one is a non-modal dialogue. We already get into the differences a little bit. So first one to start with is a non-modal dialogue. It's down at the right corner. And this tells us we can sign up to this platform or skip out if we don't want to.

Then we have the popover. For example, in Teams, when you try to start a meeting, you click the new meeting button. And then at the bottom, a popover pops up with some follow-up actions to take to start the meeting. Then we have the model dialogue. This is actually a model dialogue. Why this is a model dialogue? You can see it. This is a full screen with a model, almost full screen, centered in the middle. And the background is blurred as well.

For example, in Teams, when you try to start a meeting, you click the new meeting button. And then at the bottom, a popover pops up with some follow-up actions to take to start the meeting. Then we have the model dialogue. This is actually a model dialogue. Why this is a model dialogue? You can see it. This is a full screen with a model, almost full screen, centered in the middle. And the background is blurred as well.

So I have to interact with this model in order to continue browsing this website. I actually don't like this implementation of the model dialogue because this is not an urgent message for me. It's a coupon code. Of course, it's very important for the camping owners, for sure. But for me, it's not necessary to interact with this model before I continue searching on this website. I would implement this as a non-model dialogue. And as a bonus, there's also a popover at the bottom right, asking us to chat.

Before the top layer, layering overlays were done primarily by utilizing the Z-index value, the CSS Z-index value. It works like so. I've added a video on this slide. If I have an element next to each other, lots of elements, and one of them I gave it, for example, Z-index 3, then it will be of a higher layer than the other one. So it would overlap the other ones. Now, if I add to the other element a Z-index of 5, then this one would be the top one, and so on and so on. What happens a lot when you implement Z-index on a complex, big web application, for example, or website is that you get into a Z-index mess relatively quickly.

What happens a lot when you implement Z-index on a complex, big web application, for example, or website is that you get into a Z-index mess relatively quickly. For example, could end up that you assign Z-index values of 9999. I think we all have seen these kinds of values once or twice or more. And this is what's called the Z-index mess. You don't have control anymore over how to overlap content, especially when you get into a differently positioned element with positioning like a sticky or absolute. This also has effect on the overlay, and the top layer actually is here to help out.

But before we go to the top layer, what actually is the maximum Z-index value? Well, that's this number. This is a very big number. It's about 2 billion. I can't even pronounce it, so I created a number to pronounce this number. Huge number. We will keep it at 2 billion. This is the largest number that can be assigned to the Z-index because this is the largest number that can be stored in a 32-bit integer. So if you reach this number and you are in a Z-index mess and you reach this number, then you know that you are at the end and you have no other option than to implement your overlay element into the top layer, I would say.

The top layer is a layer and this is a layer and it's above everything else. So it is its own layer above the main document. On the right, you can see that it's visualized like this in the Chrome DevTools. It was added to the Chrome DevTools about two years ago, I would say. You can see it down at the bottom beneath the HTML root. And that is if you have implemented something in the top layer. So if there's an active element in the top layer, then it will be there for you to see in the DevTools. Another visualization to visualize the top layer is like this. So you have your main document at the bottom with your semantic HTML like footer, main, header, nav, aside. Then you have elements or content that needs to have an overlay over this content, over this document. And you can implement this with Z-index.

So for example, an overlay, dropdown, tooltip, notification. Then on top of everything else in its own layer, you have the top layer with the dialogue and the popover. Some dialogues go there, more about that later, and all of the popovers go always to the top layer. Then there is this third option that's request full screen. And I think everyone watching has used this full screen once or more because this is the JavaScript API that is called upon when you maximize a YouTube video. When you maximize a YouTube video, then your video gets taken to the top layer and is maximized in the top layer. And you can actually also see it.

Now let's do a little bit more of a deep dive into the two ways to access the top layer. And let's start with dialogue. So the dialogue is an additional window that temporarily overlaps the main content of a web page, and it typically contains information, a task, or an action. And you can open a dialogue in two different ways. You can open it for the show method. If you were to open it with JavaScript, then you use the show method or the show model method. And you may have guessed it. When you open the dialogue with show model, then the dialogue is opened as a model. And when you open it with show, then the dialogue is opened as a non-model.

Some basic features you get for free when you use the dialogue element is the first one and that you get the role of dialogue, which is automatically added. And the role attribute is important when you try to take good care of accessibility, for example, because the role is communicated to the accessibility tree. The accessibility tree is used by assistive technology like screen readers or a force command. And the screen readers and assistive technologies use this information to know what's on the screen and to know what certain elements need to be handled. And yeah, you also have the option to show as a model or a non-model. And this is so the dialogue element has an open and a close mechanism.

And yeah, you also have the option to show as a model or a non-model. And this is so the dialogue element has an open and a close mechanism. So without JavaScript, you can open and close the dialogue as a model or a non-model. And when you open it as a model, they get two extra features, which is closing with the escape button. If you, for example, use keyboard navigation, or if you just want to close it with one key binding, they could use escape. And the focus is trapped. The focus trap sometimes needed when you implement a dialogue, for example, that's a model dialogue, takes over the full screen, you don't want the keyboard navigation, the focus ring to go underneath the model, for example.

Later on, actually in the next slide, I will demo all of these features and also show you some extra ones. So I have two different implementations of a dialogue. The first one is similar to the example I showed in earlier slide. I will also use, you can see which key, which keys I'm, which I use keyboard navigation and you can also see the keys that I use on the screen. And I'm using keyboard navigation to also show you some accessibility features. So you can see that my focus is now on the survey dialogue. I can open this because this is a button with enter, for example. And what is nice to see is that I cannot close this I cannot close this model with escape. I need to close it with the close icon. Enter again.

But what do we notice? So we now the focus ring is focused on the button. And when I open the dialogue, the first interactable element within the dialogue gets focused. So that is the first interactable element in this case is the close button. That's an extra accessibility feature that you get for free when you use the dialogue is that the focus management is by default arranged for you when you open a dialogue. So the first interactable element needs to get to focus because this is newly added context to the screen, which directly needs to be focused. All right. We do not have a focus strap. So my focus can go out of the dialogue. As you can see. And this is a very basic dialogue implementation. Now for the second one, there are more features to show. So this is an implementation of a model dialogue. And this is a session extender.

So, for example, I work within a bank. We have strict security rules. When a user doesn't interact with the web application for more than 15 minutes, for example, then you would get prompted with such a message telling the user, would you like to extend your session? Or if the timer runs out or if you choose to, then we will log you out because of security reasons. And this is actually and I like this implementation of the model dialogue because this is necessary information. I have to interact with this or I have to show this message to the user and the user needs to needs to do something with this information urgently. So this is good implementation of a model dialogue. It's it's it basically is necessary information for the user and he needs to do something with it. Then I would say it's okay to do a model dialogue. What we also see is that there's a blurred background. That's another default feature by the model dialogue. So the model dialogue gets taken into the top layer and in the top layer you have the option to add a backdrop to the dialogue. I will show how to do that in a second, but that's an extra feature. And we have the focus trap as well. So as much as I would like to tap outside of the model now, I'm not able to because this is the context where I need to be in because the background is blurred. There's a big model in the middle of the screen and my focus ring should not go outside of this context. All right. Then the backdrop. I already mentioned it. The top layer has a default feature, default extra feature and that is that to every element within the top layer you can add a backdrop and that's a styleable pseudo element which you can style with CSS to your liking. Now let's go into the top layer a little bit more.

The popover of course. Popover is a floating overlay that provides information or an action when triggered. Appearing above the main content without blocking the user's workflow. And as someone named Tindame some said, a popover needs to pop. So it's popping up. It's also in the name popover. It pops up when you click on a button or you take an action and in my understanding of the popover I would like to position my popover close to the action, close to where the action was taken that opened the popover. So the popover is an HTML attribute and it can be applied to any other element in your HTML. It adds a set of behaviors to this element. For example, you can implement it on a div but also on a dialogue.

The popover does not add a role but it adapts the role of the element it's applied to. For example, you can add a popover to the dialogue and then it would have the role of dialogue. Depending on the popover type and the default is auto it will add a couple of features for free. So you would have like dismiss, keyboard behavior like for example closing with escape. All the popovers are added to the top layer and usually other popovers close but another popover is opened. For example, when you use auto because you have like dismiss the other popovers get closed when you open a new one.

How would you implement a popover? Now take for example this example, we have a button and a div. To the button we add two extra attributes, the popover target and the popover target action. And then to the div we add the popover attribute and the attribute of id which is connected to the button. Then you will get something like this. So I have an implementation on the screen, I have a button here. When I click the button, the popover is opened. And what's nice is that I also added a link into the popover and like you see the navigation is handled in such a way that the next interactive element which is inside of the popover right now is added into the order, into the tab order which is nice because this is of course the most logical way that this would work.

Closing with escape works as well which is nice. And this all requires no JavaScript, just HTML. You could also open a popover with JavaScript, that's when you would use the show popover method. I made an implementation with that as well so here I have a popover. In this case, it's a small black message with a link as well. Closing with escape and right here a new message that's open to the JavaScript. And as you may have noticed is that the popovers are added perfectly centered into the screen and that's not by mistake but that's the default styling that the popover gets because the popovers in the top layer and in the top layer is almost nothing else for most cases and for most cases and the popover by default has a CSS margin auto and then it just gets centered perfectly in the middle. But like I also said, I would like my popovers to be close to for example the button that opens the popover like for example an int inside of a form element. And this is a little bit we're getting into some flaws of the popover because the popover is kind of hard to position next to the on a custom position or next to the element that opened the popover. And you can so you have two options basically. You can try to do an implementation with the JavaScript library like a floating UI which makes it possible to easily position the popover or you would do it with CSS anchor. Only CSS anchor is not supported in all browsers yet. I do have an example with CSS anchor. Let's try it out. So focus on the button, open the button, hit enter and then you see the currently the popover is positioned at the bottom of the button. Well how does this work? The button has an anchor name of question mark and then the tooltip the tooltip implemented with the popover attributes my tooltip ID.

Well how does this work? The button has an anchor name of question mark and then the tooltip the tooltip implemented with the popover attributes my tooltip ID. The popover points to this question mark to this anchor name with the position anchor. And then you have some extra CSS values that you can add to position this popover to the liking. So what's also possible with what also will be possible with CSS anchor is to when there is no space anymore for example when there's the screen is resized to a smaller screen and there is no space anymore at the bottom but there is space at the top of the of the of the anchored element. Then the popover would be automatically flipped to the to the top side. Which is I think a very neat implementation and this would be something that would require lots of complex JavaScript to implement but in in the future this can be can just be implemented with CSS which I think is really really nice. But we will have to wait on it for a little bit because this is not supported yet in all major browsers. I think it will be soon definitely and and I will definitely check it out. I will definitely check it out when it's live.

As an overview almost at the end of the of the presentation as an overview comparing the the different elements and attributes that we spoke about of course the dialogue and the popover mainly. We have the non-modal dialogue, the popover, and the model dialogue. Let's compare them to each other. So we have the non-modal with explicit dismiss and then the model also has explicit dismiss. The popover has light dismiss. So light dismiss, I forgot to demo this but I can go back for example, when I open this popover light dismiss is when you for example when I click away when I click outside of the button for example on another element or just click away then the popover gets closed this is what we call light dismiss. Explicit dismiss is when I need to press a close button or close the model with JavaScript for example. Then the non-modal dialogue is added. You need to style this or overlay this with z-index and the popover gets added to the top layer and the model dialogue also gets added to the top layer. That's why also the popover and the model dialogue have access to the to the backdrop feature to blur the background.

What I would say if you add this to a popover then maybe you need to consider implementing this element with the model dialogue because a popover on a popover with a backdrop is I would say not always the way to go. With the non-modal dialogue you need to make a custom implementation if you want to do a backdrop because it doesn't have this by default. Then all of the features have keyboard assistance. I also demoed this. It's when the tab order gets altered because there's new context added to the screen. I showed this with the links that were in the popover for example. All the options have this but the model dialogue also has focus trap so not being able to go outside of the model with the keyboard focus ring. That was my last slide. Thank you so much for taking time to watch this talk. If you want to connect my LinkedIn I put it on the screen right now. Feel free to ask any questions or connect. Without too much to be added thanks again and thanks to JS Nation for having me on again.