Modals, Popups, Popovers, Lightboxes

like, Like, there there's some sites that do that where they, like, 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.

And a lightbox is really just like an old school

In in fact, like, popover And I guess that works fine for me new dialogue

you have to physically say, yes. I'm done with this thing. Okay? CSS 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.

I'm done with it. Submit.

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

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, That's certainly something that people are are doing right now.

disrupting,

Or animations using just animation.

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.

a button. Okay?

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.

A light dismiss is when you can click outside of it and it will close.

Yeah. Sometimes sometimes a modal is just an excuse for 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

it allows you to ignore the element.

inerting the modal itself.

Let's talk about actual tech.

if your modal would have to be a sibling of the thing you want to inert, right? So you're not actually

but it's not supported in Firefox

Stefan

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, Awesome.

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.

make any

But his example is putting it on Or the like the next millisecond,

an actual DIV itself, and that makes more sense. You'd probably pop it on your container

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

A element? Yeah. And, basically, what it does is it it stops scrolling.

whatever it is that you want to. I assume that this would be.

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

in Firefox, apparently there's

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.

Yeah. That's a good point. I'm

Like what's higher than than the body, right? Like, so I was like, you know what? Like what I built 100% accessible.

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.

kind of take pseudo screenshots in Firefox. That's cool.

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

sense unless you were are typing in an input box

But like, wouldn't that

Well, inert is kinda like that. That's what it's here. Basically,

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.

your modal is

also make it include the modal, right? Like you, what the the user is looking at into the model. That's really cool so that you no longer have to So you click on something

So

And it also hides the element from So you can take a look at the dialogue role if you're gonna be building dialogues and mobiles with a div.

the modal. Generally,

mini map for the website,

say, like, okay, well, turn the turn the scrolling off on this thing and then

application.

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

Yeah. That doesn't Which by the way, his website has popped up a few times for me recently, and he's got a really cool

So that is

So the the way that we always did this before on over to syntax.fm

Judist,

Mhmm.

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 You can pass in the dialogue 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, So that's kinda neat.

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 if something takes over full screen,

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,

Because, What should that do? Should that unfocus the input or should it close the modal? You have like an autocomplete pop up and most autocompletes when you hit escape will Yeah.

You know, maybe maybe that's the thinking is that a dialog could be presented And we used dialogue 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 show a dialogue in other ways?

And the dialogue element

Hey.

modally as in

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, it makes the dialogue so that that's the only thing you can interact with.

fixed, top left, bottom right, whatever, or offset 0 or inset 0, I should say now.

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.

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

And because MDN says it Displays the dialogue element interface

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

To style the backdrop and when somebody full screens your video, they're gonna go, and a dialogue?

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 content outside is rendered then it would close the modal, 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.

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, Now I never really used the term popover before, but I found that this is pretty, 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.

That's pretty amazing, 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 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.

really is the the dialogue is the entire

in Chrome.

Show that. Yeah. That's weird. Why is it showing modal? So the the, the, the comment here is that it opens the dialogue None of it necessarily feels incredible. Some of it does feel pretty good, in everything.

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

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

to

Whose role whose role should it be to animate a dialogue?

when you click or a a pop up a pop up or a pop over is

Yeah. It's it's working in Chrome. Okay. Yeah. Well,

is supported in all browsers right now, the dialogue element is fully supported pseudo element, Now, Wes, have you heard of the backdrop the dot return value on the dialogue. So 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.

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,

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 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 Yes. And then if you go to the URL, the elements of your,

then you can color

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 it is not a modal as in it is not disruptive.

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

the submit button on your form, it will close the dialogue for you.

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, Our neighbor was like, hey.

have a backdrop, just yet. There is, Even though the cookie banners down there. Right? So a model is something like an alert box that says, hey. You gotta do 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.

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 You could Like you could listen for? Yeah, because then you could

dialogue element.

pretty neat, labels as well, and those connect to IDs to point to essentially

Why

So the way that we do this right now is usually with, like, a a div and have it, you know, positioned

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,

does it full screen, so it looks like Backdrop is supported What I ended up doing is the 1st time you hit escape, it blurred the input

That's as a modal.

is an HTML element. It's named dialogue.

That's nice.

They have an example for closing it, but oddly enough closing it is but there's definitely opportunities here to make something kind of interesting. That's

And then when it opens, you could attach an open value,

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.

But yeah, it would be cool to

Is it?

If you do dot show or you use the open attribute, this is pretty, like, standard in terms of how people talk about these things in sort of research circles.

attach like default, you could just like animate it. You could position it off screen.

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

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

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

use, basically, the JavaScript API instead of just,

a translate x or translate y value on it, thoughts are on

a CSS.

for a full archive of all of our shows.

that opens up when you visit the website, and you can still close it and read and whatnot.

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

Oh, that's cool, but

adding animation to a dialogue

a dialogue on my sublime textbook .com. I deprecated it about a year ago.

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.

you know, wiggling the HTML around.

that shows you

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

dismissed.

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

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

like, you gotta

something like that.

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,

And, so I posted a code pen in here,

will still allow you That's a good question.

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

with the open attribute

Now to actually animate. Yeah.

Ace. Head is there an event? So screen readers won't go on. You just pop this one little inert attribute on and then that will give you your animation. But here you Just simply use the open attribute

opening of it. Clicking the button. You saw that there is a show and a show modal And with me as always is Wes,

it looks like garbage and there's nothing I could do. Yeah, it's just a it's a div, I'm currently on 112. So let's see. Firefox

and pop a number of ways.

Is there a dialogue open event 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. It's an entirely a CSS fix other than the actual

And the other the other thing here is that .show

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

or just show, So Lightbox was always kind of like a modal interface, via

pop up sorry, the modal

harder for some reason because you do need to add the class.

So I'm thinking It. Lastly, here's the coup de grace of this whole thing is the brand new

that let me But I do wanna talk about some terms off the bat because

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 and my entire checkout was closing, which is really annoying. So

so many words for different things that can pop up assertive technologies like accessibility things. So that way it's, like, focusing

like, blew off completely.

which is we're recording this on April 3. So a custom selector that will allow you to

Awesome. Wes, how's it going, man? 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.

hasty treat, we're gonna be popping into your podcast player and talking about modals, pop ups, pop overs, light boxes, dialogues, Oh, man. It wasn't just the door. It was basically if you you you have, like, a door sized

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, 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

I was gonna try to come up with something like open attribute, and then you can tell it to do a keyframe based animation.

Monday. Monday. Monday.

B sounding for pop ups. Pop ups boss.

Your dog's over in our yard.

key.

In this

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

and it just fell off flat down. And we didn't know about this.

Our the door of our fence,

Boss, and Scott

Open wide dev fans, get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing,

soft skill, web development, the hastiest, the craziest, the tastiest TS Webb development treats coming in hot. Here is Wes, Barracuda,

all the snow at our house is gone, thankfully. But we got one last little When before you go to the next one. Sorry. I just started talking about modals.

Welcome to Syntax.

Modal.

the,

roles and

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

the word modal panel and that whole panel, the wood just split this is what I wanna be doing right now.

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 So it really says that, Where if you use the show modal, it makes it disruptive.

used to define something that's intentionally 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

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 the the browser that this thing that you're working with is a dialogue, and it's just simply a role of dialogue.

is basically,

properties and, 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

disruptive

ran into on my own,

a specific input. And but 1 password

talking asking on Twitter, I was like, yeah, like the way you did it is probably class, And then you like position it off screen and then you add an open class

This is something I Yeah, I'm I'm using

and then both times it would maintain your form state in case you wanted to reopen it again. Apparently, that goes against

or I forget which one it is, but you hit escape

first realize, oh, you're in the context of autocomplete.

I used to do a few things in a modal that I no longer do. So our login, 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.

you

No issues there. So I don't feel like

Really? That feels like the way it should work. I know. It's so it is infuriating to me when a modal closes, and it animates itself in. That's nice. That's a lot simpler than I thought it would be. So it's entirely

hitting escape because you wanted to clear something off the page or you wanted to unfocus

that is focused on an on a modal maybe put a pointer events none on all these things and then also visually hide it with an ARIA attribute

Close the autocomplete,

the

checkout analytics. My checkout is in a modem And

ARIA specification.

and you hit escape.

and focused the close button. And then the 2nd time you hit it,

it looks like a normal page.

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 hey, 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

your modal that are either the title and or the description.

which can inform

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 everywhere else, 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, pseudo element? No. Man, all kinds of stuff here. Right. I know. This was quite the deep dive. So, the backdrop open UI for instances is like a thing that we're gonna talking about more about, like, research proposals for standardized UI components.

In addition to the role of Daria dialogue, you also need the aria labeled by and aria described by, 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 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.

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, For for you don't even have to do that. You could just use the attribute open.

dialogues that are not built using the new dialogue element more accessible.

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 Inside of this dialogue.

and it pops up and people think that they changed the page, so they press the back button.

situational. We're like, you know, like, Reddit. Reddit opens each of their posts in a modal type interface, but they do have URLs.

a router in their application. So and then why not give the modal its own URL?

But then that brings you to it didn't change the page, right? You have to think about What's the difference between a modal

Modals that have their own URLs.

This is something that popped up a while ago. People said, oh, we're using

Yeah. In my mind, But the method is show modal. Like, why wouldn't the element be named modal? Right?

Also, something that's happening is people design the modals to be full screen.

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

sign in used to be a modal. And then, likewise, our checkout for a very long time was a modal as well.

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,

respecting your input position. Next thing you know, you cannot type in anything.

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

in the end a page worked probably better.

deep get into position fixed stuff, and you got keyboards on Ios not