Modals, Popups, Popovers, Lightboxes

key.

Welcome to Syntax.

In this hasty treat, we're gonna be popping into your podcast player and talking about modals, pop ups, pop overs, light boxes, dialogues, so many words for different things that can pop up and and really maybe obstruct what you're doing or perhaps just gain your attention. We're gonna be talking about the terms behind them, But also the HTML and JavaScript for some of these newer HTML elements that we're gonna be dealing with.

And with me as always is Wes, the, I was gonna try to come up with something like B sounding for pop ups. Pop ups boss.

Yeah.

Modal.

Awesome. Wes, how's it going, man?

Pretty good. Pretty good. Just got back from the cottage weekend, which was, is pretty fun. We went up. There's still quite a bit of snow, which is we're recording this on April 3. So all the snow at our house is gone, thankfully. But we got one last little

play around in the snow with the kids and they had fun. Oh, that's great. Our, our lawn's starting to turn green, and I'm I'm just feeling that vibe. I I was working outside. I, we we had some crazy high winds, like, a very, very high winds like a lot of people had storms recently end up.

Our the door of our fence, like, blew off completely.

Oh, man. It wasn't just the door. It was basically if you you you have, like, a door sized panel and that whole panel, the wood just split and it just fell off flat down. And we didn't know about this.

Our neighbor was like, hey.

Your dog's over in our yard.

Oh, no. How did that happen? And then we walk outside and the fence doors on the the ground. He just walked right out. So I I had to, like, rebuild a fence door this weekend, and I was like feeling the vibe being outside. Like, oh, this is just this is what I wanna be doing right now.

So, that that that popped up into my life. Let's talk about modals, pop ups, popovers, light boxes, all kinds of different things. There's some really neat tech here, some interesting, properties and, roles and HTML elements and things that are newer to the browser, some of which are very, very supported and some of which are really interesting things that you might not be using.

But I do wanna talk about some terms off the bat because you'll recall a few episodes or maybe handful of 50 episodes ago, We were like, I have no idea what the difference between a lightbox and a modal is and what like, where do these words start and end? So after some digging, basically, the word modal is used to define something that's intentionally disruptive and something that is the only thing you can be interacting with. So when a modal pops up, it means that your tension that needs to be directed onto the modal. You know those, like, cookie banners? Those aren't modals because you can typically still scroll the page Even though the cookie banners down there. Right? So a model is something like an alert box that says, hey. You gotta do x, y, z. Right? Submit a form. You got to hit okay. You got to confirm or deny those types of things. That's a modal. I'm curious what your

thoughts are on Modals that have their own URLs.

This is something that popped up a while ago. People said, oh, we're using a router in their application. So why not give the modal its own URL? Also, something that's happening is people design the modals to be full screen.

So you click on something and it pops up and people think that they changed the page, so they press the back button.

But then that brings you to it didn't change the page, right? You have to think about The design on mobile that if you are throwing something up, make it clear that this is a pop up and not just a separate page that they've been pushed to.

Yeah. In my mind, if something takes over full screen, and it's not obvious that it's just like a window, so to say, like, it's not obvious, this. The back button should work and and should take you back.

But if it is obvious, then I I don't like that as having its own URL. If it's obviously just a little alert window over something. Mhmm.

Like, there there's some sites that do that where they, like, really hijack your browser history so that you have to hit the back button 800 times through, like, a slideshow or something like that. Yeah. And and that kind of feels the same vibe to me with giving a modal a URL, but I you know, I think that's maybe situational. We're like, you know, like, Reddit. Reddit opens each of their posts in a modal type interface, but they do have URLs.

Yes. And then if you go to the URL, it looks like a normal page.

And I guess that works fine for me Because that's kind of how you'd expect Reddit to work. Yeah. I agree. But it's it's yeah. It's it's hard to say exactly.

When before you go to the next one. Sorry. I just started talking about modals.

This is something I ran into on my own, checkout analytics. My checkout is in a modem And you are typing in an input box that is focused on an on a modal and you hit escape.

What should that do? Should that unfocus the input or should it close the modal?

Right? So I think you I think at first, it should unfocus, and then it should close the model. But, like, who wants to have a model accidentally closed while they're submitting their payment information. That's exactly it. So I was asking on Twitter, like, what should happen here specifically because

You have like an autocomplete pop up and most autocompletes when you hit escape will first realize, oh, you're in the context of autocomplete.

Close the autocomplete, but 1 password or I forget which one it is, but you hit escape and my entire checkout was closing, which is really annoying. So What I ended up doing is the 1st time you hit escape, it blurred the input and focused the close button. And then the 2nd time you hit it, then it would close the modal, and then both times it would maintain your form state in case you wanted to reopen it again. Apparently, that goes against the ARIA specification.

Really? That feels like the way it should work. I know. It's so it is infuriating to me when a modal closes, hitting escape because you wanted to clear something off the page or you wanted to unfocus a specific input. And so I was like, you know what? Like what I built 100% accessible.

No issues there. So I don't feel like talking asking on Twitter, I was like, yeah, like the way you did it is probably better than than what they're recommending, and maybe they're not going into in-depth of the complexity that I had. So Yeah. That does feel like interesting. You know what? I

I used to do a few things in a modal that I no longer do. So our login, sign in used to be a modal. And then, likewise, our checkout for a very long time was a modal as well.

And you know what? I decided that both of those things are better off not being modals.

So I moved our checkout to its own page forward slash checkout. It's now its own page. You cannot escape out of it. And, likewise, with the login stuff, I just moved it to a page, and it it feels like I was trying to be fancy by putting everything in a modal where in the end a page worked probably better.

It it's sometimes interesting to assess that, whatever that situation is, because modals can cause a lot of issues on the web, especially when you deep get into position fixed stuff, and you got keyboards on Ios not respecting your input position. Next thing you know, you cannot type in anything.

Yeah. Sometimes sometimes a modal is just an excuse for

you have bad UI and you don't know what to do. You just overlay it. Yeah. I know. I know that's it. Interesting to think about. So, again, modal is intentionally disruptive. Keep that in mind. Intentionally disruptive. It's trying to disrupt whatever the user is doing to put something in front of them. You also have something called a pop over.

Now I never really used the term popover before, but I found that this is pretty, this is pretty, like, standard in terms of how people talk about these things in sort of research circles.

In in fact, like, popover or a a pop up a pop up or a pop over is When you think about when you see, like, a user settings menu, you right click on Mac, and there's, like, a settings menu. Or you you click on the 3 dots, and a little drop down comes down. The thing about these things are is that they're not really disrupting, Like, you can still scroll the page typically when those things are there. You can still interact with other things, but it's like a a light nice little submenu, so a popover worry pop up.

So those are the the 2 terms that but also lightbox is a term that we've talked about like not having any idea where light box fits into all this like if there's something special. And really light box is like not something official and you won't really see it being discussed in, like, open UI for instances is like a thing that we're gonna talking about more about, like, research proposals for standardized UI components.

And a lightbox is really just like an old school jQuery plug in name that kind of became something that people just associated with the thing itself. So it the the name actually comes from the photography light box where you have, like, a box and you're trying to show off something to take a photo of it or whatever. But in this case, it's just like you're showing off something.

So Lightbox was always kind of like a modal interface, but it was really just a plug in or a style of plug in that the name took over. Totally. Yeah. I see it Lightbox and Modal as being the same thing. And generally, Lightbox is just more of a has media in it. Yeah. But and nowadays, we don't really use the word like or lightbox that much. I don't know if people do. Even newer developers use it at all. So, let's talk about 2 more terms, and then we're gonna get into some actual HTML stuff. So 2 more terms I wanna do is explicit dismiss and light dismiss, which is something you're going to see, being talked about in these these realms. So an explicit dismiss needs is is when you have a modal or anything that's closed via a button. Okay? Or you have to physically say, yes. I'm done with this thing. Okay? A light dismiss is when you can click outside of it and it will close.

You could think of, like, what we had with these pop ups or popovers. You know, you you have a 3 dots And maybe you click outside of it and it closes. So a light dismiss is like, alright. You can dismiss this lightly. An explicit dismiss is more like, I'm the user, and I'm saying close this thing. Close it.

I'm done with it. Submit.

Let's talk about actual tech.

So first and foremost is the inert property. It's an an attribute. Have you heard of inert before? No. Never heard of this before. This is the attribute you can put on A element? Yeah. And, basically, what it does is it it stops scrolling.

So the the way that we always did this before in the past, like, to freeze the background of a website when a modal's open is via the overflow hidden on the body. You. You you toss an overflow hidden on the body or a class that's just like frozen or whatever you you do, and that freezes the background from scrolling.

Well, inert is kinda like that. That's what it's here. Basically, it allows you to ignore the element.

So if you put inert on the body, it's gonna mean that you're not scrolling on the body.

So it prevents click from being fired when the user clicks on it. So if you click on the body, it won't do it, and it prevents focus from being raised.

And it also hides the element from assertive technologies like accessibility things. So that way it's, like, focusing

what the the user is looking at into the model. That's really cool so that you no longer have to say, like, okay, well, turn the turn the scrolling off on this thing and then maybe put a pointer events none on all these things and then also visually hide it with an ARIA attribute So screen readers won't go on. You just pop this one little inert attribute on whatever it is that you want to. I assume that this would be.

How would this work? Like the example they have it as putting it on the body.

But like, wouldn't that also make it include the modal, right? Like you, if your modal would have to be a sibling of the thing you want to inert, right? So you're not actually inerting the modal itself.

Yeah. That's a good point. I'm I am looking at some further examples right now. I have not used inert personally yet So that that's a a bit of a interesting thing. Let me see. Inert, div, inert. You can't select me. So yeah. You're right. Anything within something that has inert. You can't be selected. So why would they even show it on the body at all? Because then that would make the entire application.

Yeah. That doesn't make any sense unless you were Like what's higher than than the body, right? Like, unless the browser UI was opening up, But then does that maybe perhaps let me let me check on something really quick. I'm looking at another example on, Stefan Judist, Which by the way, his website has popped up a few times for me recently, and he's got a really cool mini map for the website, in Firefox, apparently there's a custom selector that will allow you to kind of take pseudo screenshots in Firefox. That's cool.

But his example is putting it on an actual DIV itself, and that makes more sense. You'd probably pop it on your container and then the modal. Generally, your modal is

like outside of your entire application, so you don't have to do any funky CSS stuff. Yeah. This is this is an interesting piece of tech. And, unfortunately, the the big reason why I haven't used it and maybe other people haven't used it is because it is not supported in Firefox just yet.

It is supported everywhere else, but it's not supported in Firefox just yet. There is, the ability to polyfill this thing, but, you know, you could also just wait for Firefox. But isn't it yeah. So it's in it's in Firefox developer, so I bet we'll see it. It's in 112.

So that is I'm currently on 112. So let's see. Firefox

112 release date April 11th. So maybe even by the time you're listening to this, it's it's going to be here in Firefox. And then we can all start to dive into further examples with inert.

But this is just something that exists that you should be aware of if you're building this kind of tech. Now another thing is that if you don't Want to utilize some of the HTML elements around dialogue. There's also the ARIA role of dialogue, which can inform the the browser that this thing that you're working with is a dialogue, and it's just simply a role of dialogue.

In addition to the role of Daria dialogue, you also need the aria labeled by and aria described by, labels as well, and those connect to IDs to point to essentially the elements of your, your modal that are either the title and or the description.

And this is really again something that's not going to do anything for you in terms of visual. It's not going to do anything functionally, but it is going to do make dialogues that are not built using the new dialogue element more accessible.

So you can take a look at the dialogue role if you're gonna be building dialogues and mobiles with a div.

That's certainly something that people are are doing right now.

Now, Wes, have you heard of the backdrop pseudo element? No. Man, all kinds of stuff here. Right. I know. This was quite the deep dive. So, the backdrop pseudo element, and here's probably why you've never heard of it. It has kind of a limited use case. It only works with 2 things right now. It works with things in full screen inside the full screen API. In fact, the example I saw of this was like they full screen the video And instead of black bars on the top of the bottom, they were like purple. I've it's a really dumb example, and I honestly don't know when you would use that.

But perhaps if you were diving into full screen Mhmm. You wanted more control of the background there, you could use the backdrop pseudo element for that. But You can also use the dialogue element, which is what we're gonna be talking about next. And the new dialogue element is essentially a built in pop up or a built in modal inside of a browser, and you can use the backdrop pseudo element to style the backdrop.

So the way that we do this right now is usually with, like, a a div and have it, you know, positioned fixed, top left, bottom right, whatever, or offset 0 or inset 0, I should say now.

But, basically, the backdrop is the size of the viewport, and it's rendered immediately beneath the element presented in full screen mode. This includes both elements which have been placed in full screen mode using the full screen API and the dialogue element. So if you wanted to have a backdrop, you no longer have to have a position to div behind z index, behind whatever you're doing. Thank goodness because that's something you always gotta do, and, you gotta put, like, an onclick on that thing to close your dialogue or whatever. So hey. Happy to have backdrop, Jan. So back I was just thinking, oh, backdrop is so cool for full screen video

Because, then you can color like, you know, if it's not the same aspect ratio as your monitor, the black, right? You can color that wherever you want. Apparently only Firefox does it full screen, so it looks like Backdrop is supported

across the board for dialogue elements, but only but not for video. Yeah. You know what? I tried to do an arc, and it worked. So Who who knows there? I I tried it on a Maybe. I I have no idea. Yeah. Are you trying it on full screen or on a dialogue element? Full screen. Yeah. Oh, well, maybe it is then. I I know it was a it was a demo, and that's why I learned what it actually did on the full screen video. I was like, okay. This is it. Okay. Interesting. It made it purple instead of black. Okay. I got an example right here. Let's let's test it in

in Chrome.

Yeah. It's it's working in Chrome. Okay. Yeah. Well, MDN is incorrect on that. Well, that might be the first time ever. Hey, it's just a nice little touch. That's one of those things that, like, you just take an extra 3 seconds To style the backdrop and when somebody full screens your video, they're gonna go,

oh, oh, it's something different. That's a lot. You know, I do understand why more people didn't do the select color, you know, like, selecting effects, styling the select color because that's another thing that looks nice sometimes.

It. Lastly, here's the coup de grace of this whole thing is the brand new dialogue element.

And the dialogue element is an HTML element. It's named dialogue.

And inside of a dialogue, you can put your stuff inside of here. And the cool thing about dialogue is that it has an open attribute on it. When it's open, the dialogue is open, as in it's popped up. So all you have to have is either it's open or nothing for it to not to be open.

And the cool thing here is that if you have a form inside of a dialogue, If you set the method of the form to be dialogue, when you click the submit button on your form, it will close the dialogue for you.

So that's kinda neat.

And both of these things can be interacted with with HTML and JavaScript. So we have the dot show modal method on that element. So you just get your element like you'd normally do with querySelectorGetElementById, and then you can call show modal on maybe a click event of anything to trigger this modal opening, and that's going to open it up. Now it's kind of interesting that the element is called dialogue, But the method is show modal. Like, why wouldn't the element be named modal? Right?

That's a good question.

Why What's the difference between a modal and a dialogue? That's really is the the dialogue is the entire

The dialogue is the modal, essentially. It is the window.

Show that. Yeah. That's weird. Why is it showing modal? So the the, the, the comment here is that it opens the dialogue modally as in it makes the dialogue so that that's the only thing you can interact with.

So I guess that kind of makes sense that the dialogue exists As a thing, and then when you show it modally, it takes over. Because is it possible

to show a dialogue in other ways? You know, maybe maybe that's the thinking is that a dialog could be presented a number of ways.

And because MDN says it Displays the dialogue element interface as a modal.

Mhmm.

Over top of any other dialogs that might be present. It displays the top layer along with a backdrop pseudo element like you just said. Interaction outside the dialog is blocked and content outside is rendered

Interesting. So the inert is Yep. Automatic. Implicit. You say you don't even have to add that. Exactly. And this is what's so cool about dialogue compared to doing it all yourself. When you're doing it all yourself, you need to be really concerned about your roles, your ARIA labels. ARIA described your IDs. You have to be worried about the keyboard focus, so you have to manage your own keyboard focus when you're doing it by yourself. You have to manage your own backdrop. You have to manage your own inert. But when you use the dialogue element which is supported in all browsers right now, the dialogue element is fully supported in everything.

Hey.

That's pretty amazing, that we can use this thing and have access to all that cool stuff. Now yeah. Thing that always kinda bugged me about this was, there's you know, when they think about this stuff, they they just say, hey. It works. And then if you want to animate it, you have to, like, dive into a whole bunch of different stuff. And I guess there's really not a whole lot of solutions to animating these things. Like, Whose role whose role should it be to animate a dialogue? And you you can animate the dialogue. You'll have to just Google animating the dialogue. But, basically, you're just kinda stepping in it and taking control of some of this stuff. But, you know, these these things exist, and and by default, all the works. It's a pop up. It it's not like the fanciest, prettiest thing in the whole world, but you style it with CSS and you make it you make it nice and it just works. And a lot of the common use cases are are taken care of here for you like having a form inside of it. And you can easily get access to the return value of the dialogue itself the dot return value on the dialogue. So hey, pretty neat,

Yeah, I'm I'm using a dialogue on my sublime textbook .com. I deprecated it about a year ago.

And we used dialogue Or the pop up sorry, the modal that opens up when you visit the website, and you can still close it and read and whatnot.

But yeah, it would be cool to is there an event? Is there a dialogue open event You could Like you could listen for? Yeah, because then you could attach like default, you could just like animate it. You could position it off screen.

And then when it opens, you could attach an open value, something like that.

Or you could just make your own method that Well, that does the stepping of adding classes.

For for you don't even have to do that. You could just use the attribute open.

And, so I posted a code pen in here, that shows you adding animation to a dialogue via CSS animations using just animation.

You can pass in the dialogue open attribute, and then you can tell it to do a keyframe based animation.

Now to actually animate. Yeah.

That's nice.

They have an example for closing it, but oddly enough closing it is harder for some reason because you do need to add the class.

When you wanna animate it on hiding, you have to do it with a class. So if you just want the animation to be on open, it works. But if you want the animation to be on close as well then you have to be careful about oh, they even have an example in this code pen that shows using a backdrop.

None of it necessarily feels incredible. Some of it does feel pretty good, but there's definitely opportunities here to make something kind of interesting. That's

so cool that you don't have to add there's, like, 2 classes. Usually with animations, what you have to do is you click it, you add, like, a In out. Opening class, And then you like position it off screen and then you add an open class like the next millisecond, and then that will give you your animation. But here you Just simply use the open attribute and pop a translate x or translate y value on it, and it animates itself in. That's nice. That's a lot simpler than I thought it would be. So it's entirely a CSS.

Is it? Yeah. It's an entirely a CSS fix other than the actual

opening of it. Clicking the button. You saw that there is a show and a show modal Inside of this dialogue.

So I'm thinking that let me okay. So here, Wes, here's a definitive end to this show versus show model. So there is there is a show method on the dialogue element. Okay? And if the dialogue was opened with the, with the open attribute or just show, If you do dot show or you use the open attribute, it is not a modal as in it is not disruptive.

Where if you use the show modal, it makes it disruptive.

So it says, in this example, when the dialogue is dismissed dismissed.

No method is provided to reopen it. Opening dialogues via show is preferred over toggling the Boolean on the open attribute.

So it really says that, like, you gotta use, basically, the JavaScript API instead of just, you know, wiggling the HTML around.

And the other the other thing here is that .show will still allow you to work with the rest of the document. So, for example, if you had a modal open, but you still wanted somebody to copy paste or

you had something else overlaid on top of it. People can still interact with that, where a show modal will put the inert property on on everything else. Yeah. Cool. Well, that's, that's all incredible. This it feels like, 1, they got it right with this API. They they have all of the types of things that we do with modals and the light boxes and windows. Like, these are the types of things that we all kind of just code ourselves and react or whatever. You you You have your your flavor of the day for whatever you're working with here, but it's nice to have this in the browser. And I'm excited to actually use this because right now I'm doing it all myself. So Happy to see that this is fully supported and happy to have our new, new dialogue

world here with HTML. Yes. Oh, and one more thing we should say is that these are 100% styleable.

It's not like an alert or something like that where it's like, oh, that's cool or like the data input.

Oh, that's cool, but it looks like garbage and there's nothing I could do. Yeah, it's just a it's a div, accessible div with some handy features. Alright. That's it. Thanks, everybody. Catch you later. Woah. Woah. Actually, before you go on, say that. Woah. Woah. Last thing.

You you just nailed it. You unlocked the whole thing in that last sentence before you zoomed off of it really quickly.

It's it you know, we talk about accessibility. It shouldn't be hard in the web.

Like, this is it. This is the type of things that we're talking about. It, like, handles all the accessibility stuff for you in a way that you don't have to think about it as much. If you put it on the developer, a lot of developers aren't gonna bother with it. So just make it, the default and make it good. Hey. Modal dialogue. Thank you very much. Alright. That's it. That's all I got.

Awesome.

Ace. Head

on over to syntax.fm for a full archive of all of our shows.

And don't forget to subscribe in your podcast player or drop a review if you like this show.