Oh. Beautiful! I think I have a new favorite pseudo-element :) @Kevin Powell: Is it possible to add some very light animation to the modal’s appearance?
What site do I need to follow to find out when new features are added to css? You seems to have an inside scoop and because I’m new to all this I have no idea where everyone’s find these new feature updates
I think I watched at least a dozen videos of yours before I realized you were saying "hello my front end friends" and not "hello my friend and friends"
This is something we've needed for a long time. Dealing with JS libraries for this kind of thing is inconsistent at best, and frustrating at worst. Even though it *does* technically require JS to work as modals (it would be nice if there was an kind of thing), its so minimal that even implementation in frameworks will take no time at all.
Is there a clean way to close on outside click, by chance? I'm assuming you can throw a listener on the ::backdrop pseudo element? Otherwise great content as always, thank you so much!
@@josvelema2362 I don't have a fiddle up to play with all of this, was just kinda theoretical, but I think your example might fail bc backdrop isn't a class, but a pseudo-element right? (i.e. - it's not .backdrop but ::backdrop) not sure you can target a pseudo element off target event, but again im just thinking off my head so could easily be wrong here
@@soggygooseman maybe not , but wrapping it an container with a class would. or maybe you could negate it in the if statement. I have no problems with my own modal system where the modal can be closed by pressing on the X button or (so an or statement also) outside the modal box (the blurred backdrop/ground). If it is not possible , it should be made possible ;) Have it go when you find the time and let me know , I don't have time at the moment for fiddling , but I would if I had.
Hello Kevin, since you asked, it could be easier: showModal() / hideModal() or openModal() / closeModal() would be, if not more obvious, more coherent. Great video nonetheless. Thank you
It's great. Next I want native css/html option to style/modify Drop Down menus, would be a dream! Also, you can easily use backdrop-filter: blur(4px); to get a blurry background, if you like fancy stuff
Learned this the hard way: if you change the "display" style property on the dialog, you'll also have to add a "display: none" for when the dialog is closed. The way the browser closes a dialog is just by setting `display: none` on it when the "open" attribute is false. Since that style comes from the User Agent stylesheet, it's very easy to overwrite - so if you have a rule like: .myDialog { display: grid }, make sure you also add an accompanying rule like .myDialog:not([open]) { display: none }.
I watched this, thought it was cool, went about existing, 3 months later, needed it, remembered your vid, searched it, found it and jobs done. Love your work, thank you!
No more bootstrap modals! Although I create my own every time I need one even though I have bootstrap linked because I don't like how bootstrap creates and appends a backdrop element every time you open the modals. And of course it destroys the backdrop when you close it
Very easy and useful. Thanks Kevin. A small tip. If you have a global reset of padding: 0; margin: 0; the model window will be stuck to the left side of the page when it opens
ESC closing it by default might be problematic if you require user to enter something also i wonder if its being closed when user presses back button of the browser its really useful especially on mobile. i set every modal as a route. so it stays open when user refreshes or closed when user presses back and shows up again if user presses forward or he can share the link with someone else, and they will see the same modal
Okay, I've got to ask: What do you say at the beginning of your videos? You seem to enunciate more with each video but I'm still not getting it. 😃 "[what] friends"? Frent and? Fren time?
on iOS the built in alert/confirm/prompt are transitioning background-color. This does not appear to work with . I tried "transition: background-color 1s ease-in-out;" in the ::backdrop pseudo class. No effect. Grrrrr,... Any ideas if there is a way to fade background opacity in/out with dialogs?
I'm currently using bootstrap for modals at the moment since it was quick and dirty. But I'll be looking to implement this for sure! Love your content!!!
Awesome! Just curious, would it be possible to demonstrate how to apply this functionality to multiple buttons on one page, like using "querySelectorAll" to call out more than just one open modal button?
in your codepen link, where are all those variables coming from? for example, color: var(--gray-8); but I don't see it declared anywhere, so confused... ?
Hi Kevin, hope you can still receive messages from here. Do you know if it is possible to only enable one ::backdrop if you use multiple open dialog elements? I don't want the ::backdrop to stack with two dialogs open.
Those cursed cookie popups from 2020 have ruined modals i think. Yes, i love having to clear away windows before i can use a website! It invokes a feeling of claustrophobia to see only 20% of the page, very good UX.
This is the simplest way to close the dialog on outside click I've got so far: document.querySelector("dialog").addEventListener("click", function (e) { if (!e.target.closest("div")) { e.target.close(); } });
Well, this is good timing. I'm collaborating with a bunch of colleagues on a hackathon project starting tomorrow, and will need a modal. Was going to create it from scratch, so this will be a huge time saver since we only have a day and a half to have our idea come to life. Thank you!
Thank you so much for just posting this video. I was trying to find a way to do this and came across your video which worked perfectly! Love watching all of your content
I think you can basically wrap the close button in the form inside the dialog so u don't have to use an event listener on the close button. Sure, there might be scenarios where you'd need the event listener but not for most use cases. Great stuff.
I really dislike people shortening modal dialog to just modal, some menus are modal (mostly in video games), do to accidental clicking of items when wanting to exit a menu, and now you are not describing what modal item you are using. Just like saying toggle instead of toggle button, toggle switch, or group toggle; there are details lost when not using the full name of the item you are using. Also, modal is a property of an object that changes behavior and not the object itself, this is how it as always been for native GUI dialogs; it wasn’t until HTML was being used as GUI elements that this term was changed from talking about a type of dialog.
Hi Kevin, great video. When I will use two inputs in dialog, then I will close dialog window. How can I get data from input to variable? Thanks for answer
HI Kevin, one of things the newbies dislike about your course is that you start with the base code but your supporting material/code in codepen has the completed version. To be honest many of these newbies look to others for help. Ultimately, these newbies have concluded that your videos are not for them but for experts. So sorry, feedback from hundreds of newbies in a user group. Guess the video has lost all these view points. I am posting this so that you know and do not assume.
Hmmm, still javascript needed to open and close. It would have been so cool if it had a construction like for on input and label to make it even more declarative. Still, this is good enough to make me all warm and fuzzy inside. It will save me a lot of typing.
I really loved this native feature since its begin but... I sincerely does not understand why is not possible to animate in any way showing and hiding of it... For a final customer, this could be enough to not want this simple solution and continuing to use old js modals with fade/slide effect... 😞
I was struggling to extend the dialog to full width and full height. just adding min-width to full helped me solve the issue. thanks a ton for the video.
Very helpful and informative video, thanks! Fairly new to this what does & > * mean in your style sheet my studio code does not like it and shows as an error.
Hi KevinPowell is there any way to stop modal effecting the modal from pinch zooming.Like if the screen is already zoomed out and we click on the button then the dialog should not be zoomed it should fit the mobile screen
Thanks Kevin! Love your content. I am immediately implementing this into two of my active projects! So, much cleaner/easier and less code than the old way! Thanks for keeping me up to date my friend!
Eh, maybe a timesaver for newbies, but i can bet the rest of us already have simple enough, but more robust solution in our snippets of choice. I vote "why bother".
I'm using mine to view an image in a bigger size and the behaviour is extremely strange. Despite both the container and img having the same aspect ratio and the img using a percentage of the container, SOMETIMES (and that's the strangest part, sometimes only...) the img gets taller than allowed. Really not sure what's going on here but it's very strange. Using display: flex; makes the modal always appear! No idea why either. Very strange.
Okay, just had a good laugh 😆 "Have you ever needed a modal or popup to ...POP UP?" ...and then the TH-cam Cookie Banner popped up on me. Now, THAT'S what perfect timing is all about. Comedy GOLD
Thanks so much for this tutorial, I've been trying to figure this out for a while and a lot of tutorials online are very complicated as they are not aware of the built in functions that you demo'd. BTW for anyone struggling to get their modal to appear at the centre of the screen use the following CSS properties on your modal as I was getting frustrated that my modal was appearing in the corner of the screen. .modal1 { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 20px; border: 1px solid black; z-index: 1000; }
OK cool! Any idea how to select the backdrop? I guessed const backdrop = document.querySelector('#modal::backdrop') Also, how do you get css variables to work with the backdrop?
Thanks for another great video! I don’t know if it’s safari (iPhone) that doesn’t support it yet, but VoiceOver doesn’t announce that the modal has popped up. Usually you need to set a live region for screen readers to announce real-time changes like this. I’m curious if that is now out-of-the-box. I’ll check with another screen reader and report back … UPDATE: Tested with -compatible browser and the NVDA screen reader. It works! Not clear that it works with modals triggered by something else than a user interaction. For example "You're about to be signed out automatically". That may or may not still need a role="alertdialog". Another thing: an accessible solution, like a11y modal, should place the focus back on the button/link once the modal is closed.
How does dialog behave in stacking context? I am having trouble centering the dialog, i have a fixed navbar and a background hero with an alpha overlay with z-indexes. I checked a lot of things but I don't know what is going on :(
I have two problems with integrating the dialog modal: 1. It does not hide itself, its always visible. When i click the "open" button, a second copy of the modal appears. 2. By default, it appears on the top left corner of the screen. How do i center it? It seems that yours is centered by default i hope someone can help me.
And 2 days before this went live, dialog and ::backdrop gained support in Safari, and it's now supported in all major browser engines 🥳
🤩🤩
Damn, so easy to complement this behavior!!!
Thank you Kevin!
Oh. Beautiful!
I think I have a new favorite pseudo-element :)
@Kevin Powell: Is it possible to add some very light animation to the modal’s appearance?
Any way to close modal on backdrop click?)
What site do I need to follow to find out when new features are added to css? You seems to have an inside scoop and because I’m new to all this I have no idea where everyone’s find these new feature updates
I think I watched at least a dozen videos of yours before I realized you were saying "hello my front end friends" and not "hello my friend and friends"
🤯
You aren't the only one, lol. I've tried slowing down to make it more clear
I made a polyfill for "dialog" several years ago, and I'm honestly glad it's *finally* outdated. It's about time.
Thanks Kevin for this. You are that special person God has given this generation. Thanks for the updates. I like your explanation always
This is something we've needed for a long time. Dealing with JS libraries for this kind of thing is inconsistent at best, and frustrating at worst. Even though it *does* technically require JS to work as modals (it would be nice if there was an kind of thing), its so minimal that even implementation in frameworks will take no time at all.
I am surprised there is no "for" indeed.
I was literally trying to build my own modal with css last week. Amazing.
Same. 🙂
@@davidgwyer5169 how can i close the modal by clicking on the backdrop using vanills js?
It's still good to build your own to see how it works.
Is there a clean way to close on outside click, by chance? I'm assuming you can throw a listener on the ::backdrop pseudo element?
Otherwise great content as always, thank you so much!
i join the question
with an eventlistener on click yes you can; something like this: modal.addEventlistener("click"" , (event) => { if( event.target.className == "backdrop" ) { modal.style.display = "none"; } })
@@josvelema2362
I don't have a fiddle up to play with all of this, was just kinda theoretical, but I think your example might fail bc backdrop isn't a class, but a pseudo-element right? (i.e. - it's not .backdrop but ::backdrop)
not sure you can target a pseudo element off target event, but again im just thinking off my head so could easily be wrong here
@@soggygooseman maybe not , but wrapping it an container with a class would. or maybe you could negate it in the if statement. I have no problems with my own modal system where the modal can be closed by pressing on the X button or (so an or statement also) outside the modal box (the blurred backdrop/ground). If it is not possible , it should be made possible ;) Have it go when you find the time and let me know , I don't have time at the moment for fiddling , but I would if I had.
I haven't tried playing with that, but I bet it's not too hard. Only thing is I don't think you could listen for a click on the pseudo element
Hello Kevin, since you asked, it could be easier: showModal() / hideModal() or openModal() / closeModal() would be, if not more obvious, more coherent.
Great video nonetheless. Thank you
Agree. If I saw show() or showModal() in someone's code, I'd immediately assume that hide() or hideModal() would be what I'd need to get rid of it.
, showModal(), and close()...
Easy!
Doesn't make sense to have to close and closeModal if they're doing the same thing
It's great. Next I want native css/html option to style/modify Drop Down menus, would be a dream!
Also, you can easily use backdrop-filter: blur(4px); to get a blurry background, if you like fancy stuff
Learned this the hard way: if you change the "display" style property on the dialog, you'll also have to add a "display: none" for when the dialog is closed.
The way the browser closes a dialog is just by setting `display: none` on it when the "open" attribute is false. Since that style comes from the User Agent stylesheet, it's very easy to overwrite - so if you have a rule like: .myDialog { display: grid }, make sure you also add an accompanying rule like .myDialog:not([open]) { display: none }.
Had the same problem here any display property for the element in CSS keeps it open...
How can I pass data inside or something like ajax ?
Your comment save me some good time! thank you!
Very important note here! Thanks for providing clarity.
Thank you so much for this comment. I've spent hours trying to figure out why my modal wasn't closing
Exactly the thing I was waiting for.
Kevin saved my life again once again
I watched this, thought it was cool, went about existing, 3 months later, needed it, remembered your vid, searched it, found it and jobs done. Love your work, thank you!
Thanks Mr. Powell !
Hi Kevin, how would you go about closing the dialog by clicking outside the dialog?
No more bootstrap modals! Although I create my own every time I need one even though I have bootstrap linked because I don't like how bootstrap creates and appends a backdrop element every time you open the modals. And of course it destroys the backdrop when you close it
I am eagerly waiting for the videos to be uploaded by Professor ❤❤
Very easy and useful. Thanks Kevin. A small tip. If you have a global reset of padding: 0;
margin: 0; the model window will be stuck to the left side of the page when it opens
thank you legend
Thank you!
Thanks man👍
Thank you for your comment, this helped me with my project :)
Fabulous indeed!
ESC closing it by default might be problematic if you require user to enter something
also i wonder if its being closed when user presses back button of the browser
its really useful especially on mobile.
i set every modal as a route. so it stays open when user refreshes
or closed when user presses back and shows up again if user presses forward
or he can share the link with someone else, and they will see the same modal
Was just looking at this. Great video and perfect timing!
so dialogue open is another way to center items (interesting) :)
Okay, I've got to ask: What do you say at the beginning of your videos? You seem to enunciate more with each video but I'm still not getting it. 😃 "[what] friends"? Frent and? Fren time?
Hello my friend and friends... That's what I thought until yesterday. Now I believe he says: Hello my FRONT END Friends
Hello my front-end friends 😊
@@KevinPowell Time to switch to "Hello my you eye friends"
bro this doesn't work with me mannn
It--
It's that easy!? Time to ditch bootstrap :)))))))))))
bootstrap is harder than this but bootstrap is still easy
Tried it out, but for some reasons my modal is not fixed and not centered?
Margin auto will center dialog
blogger theme development😇😇😇
In ::backdrop
You can use the following method
background-filter : blur(“add how many px with blur ”) i use 5px
Be careful with this! It's not a11 (accessibility)! So, great for backends, not so great for public websites,
Can this be used to ask user something like with javascript "confirm"?
on iOS the built in alert/confirm/prompt are transitioning background-color. This does not appear to work with . I tried "transition: background-color 1s ease-in-out;" in the ::backdrop pseudo class. No effect. Grrrrr,... Any ideas if there is a way to fade background opacity in/out with dialogs?
I'm currently using bootstrap for modals at the moment since it was quick and dirty. But I'll be looking to implement this for sure! Love your content!!!
There’s never been a better time to give Bootstrap the boot. 👢 ;-)
The last time I watched your video, you said "Hello there my friend and friends" in your intro
Awesome! Just curious, would it be possible to demonstrate how to apply this functionality to multiple buttons on one page, like using "querySelectorAll" to call out more than just one open modal button?
Have no idea why chrome on linux is dropping : Uncaught TypeError: modal.showModal is not a function. Can't figure it out.
in your codepen link, where are all those variables coming from?
for example, color: var(--gray-8); but I don't see it declared anywhere, so confused... ?
I think this will definitely replace the MudBlazor dialogs I’m currently using.
Hello. Why still work if comment this // const modal = document.querySelector("#modal");
Hi Kevin, hope you can still receive messages from here. Do you know if it is possible to only enable one ::backdrop if you use multiple open dialog elements? I don't want the ::backdrop to stack with two dialogs open.
Pause at 7:26
No Kevin, I am not going to kiss you! :P
Joking aside though, awesome tutorial. I didn't even know the even existed.
Those cursed cookie popups from 2020 have ruined modals i think. Yes, i love having to clear away windows before i can use a website! It invokes a feeling of claustrophobia to see only 20% of the page, very good UX.
This is the simplest way to close the dialog on outside click I've got so far:
document.querySelector("dialog").addEventListener("click", function (e) {
if (!e.target.closest("div")) {
e.target.close();
}
});
Well, this is good timing. I'm collaborating with a bunch of colleagues on a hackathon project starting tomorrow, and will need a modal. Was going to create it from scratch, so this will be a huge time saver since we only have a day and a half to have our idea come to life. Thank you!
Am I reading caniuse correctly? It shows that Chrome has had support for dialog since August 2014?
Thank you so much for just posting this video. I was trying to find a way to do this and came across your video which worked perfectly! Love watching all of your content
I think you can basically wrap the close button in the form inside the dialog so u don't have to use an event listener on the close button. Sure, there might be scenarios where you'd need the event listener but not for most use cases. Great stuff.
have a thumbs up sir
Dammit! I spent a lot of time coming up with a JavaScript modal dialog box scheme, only to have YOU undo it with a single native HTML element! lol
I really dislike people shortening modal dialog to just modal, some menus are modal (mostly in video games), do to accidental clicking of items when wanting to exit a menu, and now you are not describing what modal item you are using. Just like saying toggle instead of toggle button, toggle switch, or group toggle; there are details lost when not using the full name of the item you are using. Also, modal is a property of an object that changes behavior and not the object itself, this is how it as always been for native GUI dialogs; it wasn’t until HTML was being used as GUI elements that this term was changed from talking about a type of dialog.
Hi Kevin, great video. When I will use two inputs in dialog, then I will close dialog window. How can I get data from input to variable? Thanks for answer
Kevin Powell is the Dumbledore of CSS. Just saying.
HI Kevin, one of things the newbies dislike about your course is that you start with the base code but your supporting material/code in codepen has the completed version. To be honest many of these newbies look to others for help. Ultimately, these newbies have concluded that your videos are not for them but for experts. So sorry, feedback from hundreds of newbies in a user group. Guess the video has lost all these view points. I am posting this so that you know and do not assume.
super! wish they gave us the modal::backdrop - filter blur option to go with it..
Hmmm, still javascript needed to open and close. It would have been so cool if it had a construction like for on input and label to make it even more declarative.
Still, this is good enough to make me all warm and fuzzy inside. It will save me a lot of typing.
please I have practices the pop up method, but when call in the browser I nothing display, anyway I am connecting to href
I really loved this native feature since its begin but... I sincerely does not understand why is not possible to animate in any way showing and hiding of it... For a final customer, this could be enough to not want this simple solution and continuing to use old js modals with fade/slide effect... 😞
My life has been changed since this video dropped
I was struggling to extend the dialog to full width and full height. just adding min-width to full helped me solve the issue. thanks a ton for the video.
Very helpful and informative video, thanks! Fairly new to this what does & > * mean in your style sheet my studio code does not like it and shows as an error.
Sadly not supported in Safari, so for some iPhones running Safari, the modal is showed all time =(
ok modal form with method dialog but if you want POST method ?...
Found solution to center modal with margin auto. By default the modal is positioned absolute, top left.
I will make this one. Thanks. Always a fan.🤗
I'm totally out of the loop when it comes to the javascript side of it. Is it in the web page, a linked resource, how does that work please ?
Hi KevinPowell is there any way to stop modal effecting the modal from pinch zooming.Like if the screen is already zoomed out and we click on the button then the dialog should not be zoomed it should fit the mobile screen
Adding transitions/animations to the dialog backdrop is a fucking nightmare.
I think I'm in love 😅😅😅
*This has been a long time coming,* I hate the confirm dialog!🤨
Thanks Kevin! Love your content. I am immediately implementing this into two of my active projects! So, much cleaner/easier and less code than the old way! Thanks for keeping me up to date my friend!
when I changed my div into a dialog it doesn't disapear from the screen, how do I makt it disapeat ?
When did they add this to the spec, and is it for all browsers now?
Been in the spec for ages, Firefox and Safari only just added support for it though.
@@KevinPowell trying to find people on here that use it with blazor. Can u hook me up?
I use a hack now and its not elegant.
how can we add an animation to this? thanks for the video my superhero Kevin
With all the things that native CSS can do these days, are we approaching to the end of the need of Bootstrap?
After doing on/off hobbiest web dev for like 15 years I've spent so many hours making stupid modals this changes everything forever.
Thanking you, I have been trying to learn practice anyway.
Awesome!
Anyone used this with Blazor?
Eh, maybe a timesaver for newbies, but i can bet the rest of us already have simple enough, but more robust solution in our snippets of choice. I vote "why bother".
hi. i have a question, why when i reset padding and margin to 0, dialog not woking good, it appear at the top
if you use or need modal popups, you should quit designing websites
any tips on using the backdrop with react and tailwindcss?
hi, is there an update on this? I keep getting a .document error and cant figure it out, thanks
rofl i was just searching how to make modal and got on yt to change music
🥺 i just finished my exam and had lots of modals 😅 well next time i ll use this one
React Portals are super cool if you want to build Modals in react
I'm using mine to view an image in a bigger size and the behaviour is extremely strange. Despite both the container and img having the same aspect ratio and the img using a percentage of the container, SOMETIMES (and that's the strangest part, sometimes only...) the img gets taller than allowed. Really not sure what's going on here but it's very strange.
Using display: flex; makes the modal always appear! No idea why either. Very strange.
When do you think it will be widely supported by browsers?
Hi Kevin I have some issues regarding css to discuss. Can we?
Very useful tag! Didn't know about it
do i need jquery for this sorry im a beginner it's not working for me
Good stuff ✨✨
woooooooow awesome, my life will never be the same
Thanks!!!
Okay, just had a good laugh 😆
"Have you ever needed a modal or popup to ...POP UP?" ...and then the TH-cam Cookie Banner popped up on me.
Now, THAT'S what perfect timing is all about. Comedy GOLD
Thanks so much for this tutorial, I've been trying to figure this out for a while and a lot of tutorials online are very complicated as they are not aware of the built in functions that you demo'd.
BTW for anyone struggling to get their modal to appear at the centre of the screen use the following CSS properties on your modal as I was getting frustrated that my modal was appearing in the corner of the screen.
.modal1 {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 20px;
border: 1px solid black;
z-index: 1000;
}
OK cool!
Any idea how to select the backdrop? I guessed
const backdrop = document.querySelector('#modal::backdrop')
Also, how do you get css variables to work with the backdrop?
That sidebar modal is good for open a hamburger menu
It only took 15 years, but we finally got it boys!
Wow that's really cool I didn't even this existed
Clicking the background should definitely close the dialog
Why did I not know about the awesome dialog element? I literally built a modal a few weeks ago from scratch by messing around with divs.
Thanks for another great video! I don’t know if it’s safari (iPhone) that doesn’t support it yet, but VoiceOver doesn’t announce that the modal has popped up. Usually you need to set a live region for screen readers to announce real-time changes like this. I’m curious if that is now out-of-the-box. I’ll check with another screen reader and report back …
UPDATE: Tested with -compatible browser and the NVDA screen reader. It works! Not clear that it works with modals triggered by something else than a user interaction. For example "You're about to be signed out automatically". That may or may not still need a role="alertdialog".
Another thing: an accessible solution, like a11y modal, should place the focus back on the button/link once the modal is closed.
How does dialog behave in stacking context? I am having trouble centering the dialog, i have a fixed navbar and a background hero with an alpha overlay with z-indexes. I checked a lot of things but I don't know what is going on :(
Margin auto will center dialog
I have two problems with integrating the dialog modal:
1. It does not hide itself, its always visible. When i click the "open" button, a second copy of the modal appears.
2. By default, it appears on the top left corner of the screen. How do i center it? It seems that yours is centered by default
i hope someone can help me.
Margin auto will center dialog
DUDE THAST SUPER EASY THANK YOU KEVIN