It's a pretty good element. Better than anything else. I just wish that the people that specced it, thought about the case of closing the dialog by clicking on the backdrop. Right now you need a bunch of extra elements, css and some JS to make this situation work in the correct way, where the backdrop only closes on a click, and not merely on (what essentially is just) a mouse up event.
@@user-il9qo4qc4n they definitely would notice. Run a lighthouse test to see the results, though. Its on the developer tools of Chrome based browsers. And it doesn't work on file:///
@@user-il9qo4qc4n They would definitely notice. And making your own modal system is hard to make it accessible. If you're creating a new web app, you should use the new dialog system.
I know this is off topic but this is your newest video and will grab your attention easier. How do I make a button in a grid be worth two column spaces without messing it up?
Like so many new HTML elements, this is cool, but useless for any projects that go beyond the most basic styling. - backdrop does not inherit css variables (i.e. colors) - open / close is done by display block / none, so it's impossible to animate the appearance via transitions. You have to re-write everything manually to make transitions possible. - backdrop is not hidden, but removed on hide, so even when you re-wrote the dialog to allow for transitions, the backdrop will not work with them
What if you want to have 2-3 different dialogs on a page. Let say button A is opening the first button and buttonB is opening the second different one. How can we differentiate the dialogs using this html element?
@@anmeno This goes down to an iPhone 6s, which is even below normal for an average person to own. The iPhone 6s is now 8 years old. So, I don't expect you to run into too much trouble there
❤ Hi @WebDevSimplified I am currently working on a project, but I am getting some issues in updating a part of the page with JS. Can I please get a hand on this?
Originally released in 2014, this has had full support on all major browsers since 2022. Great find!
Emotional damage 😂
Its nice to see Web finally catching up to native platforms.
Thanks. These shorts are hell of useful keep up
This makes “agree to our terms of service” so much easier now
Holy cow bro, I just was freaking out about this before your video popped up! Yeah dialog is really cool. Keep up the energy have a good day
It's a pretty good element. Better than anything else. I just wish that the people that specced it, thought about the case of closing the dialog by clicking on the backdrop. Right now you need a bunch of extra elements, css and some JS to make this situation work in the correct way, where the backdrop only closes on a click, and not merely on (what essentially is just) a mouse up event.
This is for very simple things you can’t really customize how the modal
Opens or closes (I.e fade out and translate down)
Skill issue. You can customize everything
Love the hair and the videos bro 🎉
Cool, tyx dude. I didn't know about the dialog elements
Shorts are very helpful thank you
Amazing ! I just realized when watched your video. Thanks for sharing!
Nice one dude 🎉❤
Awesome! Thanks for sharing!
I dread working on modals and forms.
But this is interesting.
Very helpful ❤
Thanks for this. Aren't old fashioned custom models already accessible though? What's more accessible to users about doing it this way?
Old modals need a bunch of aria tags etc to represent it. This is built into the browser so screen readers etc can just work with it.
Some modals do work, yes. But loading in a ton of JS and / or CSS shouldn't be a necessary step. And with , it's no longer needed.
@@nathnolt A browser loading JS/CSS to open a modal isn't really a problem is it? Even on the slowest connections the user wouldn't notice.
@@user-il9qo4qc4n they definitely would notice. Run a lighthouse test to see the results, though. Its on the developer tools of Chrome based browsers. And it doesn't work on file:///
@@user-il9qo4qc4n They would definitely notice. And making your own modal system is hard to make it accessible. If you're creating a new web app, you should use the new dialog system.
The problem I had with it is that I couldn't make it close if a person clicks outside the dialog (in the backdrop)
Finally, I don't have to install + use any popup/alert/modal libraries
Work in all brawsers ?
can you add transitions when showing the dialog and closing it?
You can, but it doesn’t work very well in safari or firefox, only in chrome. I tried few days ago, and decided not to use it for this exact reason.
You definitely can, but you need to add elements yourself, and handle the animations yourself.
I love u❤❤❤❤ your help. Me more in ts with react really thank u
What name of this app
why they did not create grid element?
Sorry, new & learning - what is use case for this?
How is the current support for this?
Seems to be very good, all major browsers support it
Is popover different from dialog 🤔
Bootstrap => modal 👏🏻
bootstrap sucks
@@ilogbc3090 disagree 👎
That's so cool 🤯
Is this like a DIY htmx?
wdym?
I know this is off topic but this is your newest video and will grab your attention easier.
How do I make a button in a grid be worth two column spaces without messing it up?
grid-column:span 2;
That should help 🤔
@@RavenRustFan THANK YOU
@@Azmeroth1370 🙂👍
@@RavenRustFan do you know how to set a canvas width to 100% of screen?
tf you mean "open" is not prefered way of opening it? -htmx
Awesome 👍🏼👍🏼👍🏼
Great! I love it! =D
Is it draggable?
Good one
Can i use it??
Will it work for mega drop down too ??
You professor 💯👌👌
that's not "dot dot" that's "colon colon" :)
Whaaat? I didnt know this existed!
Until they support open/close callback and transition customization, then no thanks. I'll stick with custom modal.
Like so many new HTML elements, this is cool, but useless for any projects that go beyond the most basic styling.
- backdrop does not inherit css variables (i.e. colors)
- open / close is done by display block / none, so it's impossible to animate the appearance via transitions. You have to re-write everything manually to make transitions possible.
- backdrop is not hidden, but removed on hide, so even when you re-wrote the dialog to allow for transitions, the backdrop will not work with them
Yeah, I would personally not use it.
Yeah, I mean, really how hard is to reproduce this with a div? Not hard at all.
Nice!
Whatever video you have uploaded based on this concept, share the link in comments or you can pin in the comment section
Brilliant
My past short was a vanilla ice short - this is like vanilla ice teaching js
What if you want to have 2-3 different dialogs on a page. Let say button A is opening the first button and buttonB is opening the second different one. How can we differentiate the dialogs using this html element?
id's
Safari......
It does work on Safari
@@yourDecisi0n, yes from v15.4 but there are still users on older versions of Safari on the fruit phone....
@@anmeno This goes down to an iPhone 6s, which is even below normal for an average person to own. The iPhone 6s is now 8 years old. So, I don't expect you to run into too much trouble there
😮
🗨💬
it's not amazing, it works improperly in React. And who needs this element in plain HTML?
Why not it provide a simple way to create a modal with just vanilla html and css. The web revolve around html not React.
Is the goal of the web to follow react? Lol
The state of frontend developers these days lol
Well I make stuff in react and vite and after reading your comment, I understand why Prime is so critical of react 💀
❤
Hi @WebDevSimplified I am currently working on a project, but I am getting some issues in updating a part of the page with JS. Can I please get a hand on this?