This dialog element is amazing not just for accessibility but it comes with its own show/close API that can be easily implemented in React with a useRef hook. This should be the direction for web/mobile app development - making life easier for both the end user and developer.

@CottidaeSEA

Жыл бұрын

It's long overdue. There have been far too many hacky ways of doing things in the frontend, these things should just exist by default. I wish the details element could receive a bit more love.

@yobebill1234

Жыл бұрын

Came to ask this question. thank you!!

@scottbrown-xveganxedgex2799

Жыл бұрын

any way you could post small code sample of react/useRef for this?

@18.j

Жыл бұрын

@@scottbrown-xveganxedgex2799 there's plenty online, just reference the dialog and close it with the ref.current.showModal() or close()

@GeronimOCZECH

Жыл бұрын

Nty, I like my hard life 😆

There's multiple ways one could explain an HTML tag but Kyle's way is the absolute best. Always so grateful. Thanks much))

@encycl07pedia-

Жыл бұрын

There are*

@colindante5164

Жыл бұрын

@@encycl07pedia- the error was unintentional ( not deliberate). ))

@JDLuke

Жыл бұрын

One of the big advantages of a platform such as this is that many teaching styles are available, and you can find those which suit your learning style the best. That's one thing that neither college nor work will necessarily make so readily accessible.

Wow, I remember implementing modals like that 11-12 years ago for my pet projects back in the times when I studied at school. So surprised that only now it became a standard feature

@LV-ii7bi

Жыл бұрын

Bureaucracy

@AntoshaPushkin

Жыл бұрын

@@josiah7913 could it be so that it's from 2013, but back then it lacked a couple necessary features, and hasn't been supported until recently?

@AntoshaPushkin

Жыл бұрын

@@josiah7913 I see, then it makes sense that nobody bothered using it

Just a small tip. At least on VSCode, do you know that you can change the element's tag name more easily ? Click on the tag name then press F2. It avoids having to modify the name on the closing or opening tag because it works both ways.

@requestfx5585

11 ай бұрын

Thanks

@shufflepack

11 ай бұрын

on which system? doesn't work for me

@justepierre7330

11 ай бұрын

@@shufflepack MS Windows, F2 is the default key to rename things on Windows (files, folders, etc.)

@Arinze1

11 ай бұрын

Thanks

@Gabriel-iq6ug

10 ай бұрын

Ctrl+d / CMD+d as well

I just spent a good chunk of time creating a model for a project . Nice to see the simplicity of this new html element. Thank you!

@christianwatson6500

Жыл бұрын

Was just about to create one and this popped up… 😮

@waffletube5707

9 ай бұрын

@@christianwatson6500 same

Thanks for bringing this to people's attention👏. I am currently "migrating" from A11yDialog (which is great btw) to native, now that implementations got so much better over the last couple of years. Also saves so much custom and library code all over: HTML, CSS, JS; from several kb to a few dozen lines all across.

@waffletube5707

9 ай бұрын

Thanks for bringing up a11y-dialog. So you'd recommend just using this method over a11y-dialog? Is this method as accessible as a11y-dialog?

Great video! I was already aware of but you explained some features that make it worth using (especially the keyboard accessibility with modal dialogs). Previously I didn't see any point using this instead of JS implementation I already had implemented.

The best feature imho are stacked modals. If you try to create a modal inside a modal the old fashioned way with the outer modal(overflow:hidden), it will display the stacked (inner) modal only inside the already opened modal. With you're completely free to stack and overflow as you like.

@encycl07pedia-

Жыл бұрын

What's the use case of a stacked modal?

@Sk4lli

Жыл бұрын

@@encycl07pedia- Maybe confirmation dialog? Asking before submitting changes or showing error message...

@AbNomal621

Жыл бұрын

@@encycl07pedia- it is excellent way to provide a sub-par interface. And the “easiest” way is to provide a confirmation to some action inside a modal. Users will then know that you study (low) quality UI.

Mind blown. Best tutorial ever! Thank you!

Holy, I was just searching this 3 days ago. Now you just make my day bro, thanks!

Great content and presentation/demo. Thanks!

Thanks for highlighting things that can be done with native/raw HTML.

I'm kinda new around here so I didn't know about your blog - excited to see the amazing content you have on there!

Kyle, you nailed it again man. Well done. Very useful content. 👏🏻👏🏻👏🏻

Amazing! :O Kyle is like your mentor who knows better and modern ways to do things in web! Thank you!

Ma sha Allah! That's really aewsome. Thank you Kyle for sharing the update!

It is incredible how informative and efficient these videos are. Thank you so much!

Awesome! Dialogs and modals has always been a pain point in front-end dev.

@TheDragShot

Жыл бұрын

They always seemed relatively straightforward to me when using a css/js framework like Bootstrap, but at least now it should be even simpler since it's becoming a base feature of HTML5.

@HaithamAli-fy8vo

Жыл бұрын

@@TheDragShotthe fact that you rely on a framework to do it proves the OPs point

@0LoneTech

Жыл бұрын

Of course, they're even more of a pain to the user. I can't remember when I last saw a web page modal that wasn't there purely to obstruct normal use.

Other way to handle click outside is to listen on click for dialog element and, add `e.stopPropogation` for dialog body. This can also handle the edge case when border is rounded.

You are my hero. Your videos are always amazing, straight to the point, and useful!!

Great video, short and to the point. You have a new sub!

Neat! I had no idea about any of this! Definitely going to make use of these in future

Man, thank you very much for what you do. You really help people.

Wow .. massive demonstration of enthusiasm and structured presentation for information sake - thanks for sharing!

Kyle, amazing and super useful video! Thank you 🍻🍻

Amazing information once again, Kyle! Thank you. 👍 There's one single thing that I wish was covered, but perhaps it was left out due to the complexity involved. I'm developing in React and most of our applications require way more complexity of handling modals than a single one per page or application. How would this work with multiple modals being triggered from the same location? Not overlapping, obviously, but perhaps I have an extremely custom layout with multiple flows that can be triggered from the same location. I do believe you'd eventually dig into unique identifiers, but I'm just wondering if it has support for that at all. Nonetheless, gold information right here. We can finally start dropping libraries handling stuff like this. Will dive into how this could be implemented in React with Redux perhaps or with programatically triggering these modals. Much appreciated!

@scottbrown-xveganxedgex2799

Жыл бұрын

did you find anything yet? I've been looking as well.

Pretty neat. I like that it's allowing to close with the escape key by default. It would be a bit cleaner to wrap the contents of the dialog rather than using coordinates on click though. Then it's just : `dialog.addEventListener('click', e => e.target !== wrapper && dialog.close())`

@The14Some1

Жыл бұрын

this also solves a non-rectangular or rounded corners dialog issues.

@The14Some1

Жыл бұрын

Well, maybe it is better to check whether the backdrop clicked or not rather wrapping it?

@Grouiiiiik

Жыл бұрын

@@The14Some1 yes it would be better.. but you can't check clicks on pseudo elements.

@VaclavSir

Жыл бұрын

Your code would close the dialog when user clicks on another element inside the wrapper. The condition should rather use the contains method: `wrapper.contains(e.target)`

Love that Jackson bro! I have a black Jackson Kelly Pro with the flame headstock. Great video too, thanks!

I've seen your blog website and it's awesome. But I hope you would add some basic features to it, like a "Back to Top" button on the individual blog page, a sidebar containing the table of contents on the individual blog page so that the user would be able to jump to the content they want to read, a comment section below the blogs, etc.

Awesome can't wait to try it on future projects

Nice HTML you got inside this tags.

Rather than introduce complexity with getBoundingClientRect (which may potentially trigger all kinds of false positives from dropdown menus, rounded corners, and other dialog interaction that may overflow the cursor rectangle target), why not simply wrap the content inside the dialog with a div and set an event listener that closes the dialog when that content wrapper div loses focus? In fact, I wonder if the dialog object itself might not also raise a blur event somewhere that we can detect and handle. Awesome video, in any case, Kyle.

@dsego84

Жыл бұрын

Yeah, even without the div, seems like it should be possible to get the actual target in the bubbling phase and compare selector to check if it is the backdrop element or not.

@robertholtz

Жыл бұрын

@@dsego84 As a result of this discussion, I've been toying around with this in CodePen and have not been able to trap the actual target natively. The main problem is that the full page backdrop is part of the modal. In effect, when the modal is open, all clicks all over the page are regarded by the DOM to still be inside the modal. In practice, there is no way for the modal to lose focus at runtime while open. The div trick works. It's a decent workaround (a better workaround than getBoundingClientRect in my opinion) but it's not perfect. The div style must be forced edge to edge to occupy the entire dialog. If you don't do that, a click on any whitespace inside the dialog but outside the div counts as a blur event and the dialog closes. I now share Kyle's frustration, all of these tricks should be future polyfill. Truth is, the dialog object itself should natively raise an event when the backdrop is clicked. Even easier, I'd love a property we could simply set to change the modal behavior to make it close on such a click. Frankly, if we are making a wish list, I'd like both. In fact, I'd also like the backdrop to be a property of the dialog object instead of a pseudo style. My current assessment is the dialog tag is a big improvement on the usual hassles with modals but the implementation is only about 90% there. I'm still experimenting to find a universal elegant solution for modal close-on- blur. My gut still tells me that something else somewhere must bubble to the DOM that we can use as a trigger.

@dsego84

Жыл бұрын

@@robertholtz Wow, thanks for poking around. Agreed the div trick is a decent workaround. Too bad it's not possible to trap the target natively. Thanks for the write-up as well!

@krzysztofrozbicki1776

Жыл бұрын

It`s good idea but you have to be careful and be aware that dialog element has many default styling properties (e.g. default 1em padding)

@robertholtz

Жыл бұрын

@@krzysztofrozbicki1776 You are quite right. I pointed that out later in the thread when I started actually testing this out. You must override dialog's default styling and make sure your control div spans edge-to-edge of the entire dialog. Any click on the whitespace inside the dialog but outside the div counts as a trigger and the dialog closes. I'm still looking for a more elegant solution but I believe this is still better than getBoundingClientRect. With the div approach, not overriding the default dialog padding is the only way I have found that may raise a false positive but that has an easy fix. In contrast, getBoundingClientRect has many potential false positive scenarios, some of which are so involved to guard against that it nets out to be far less work to just do modals the traditional way. I prefer modals that close on blur and I want to take advantage of dialog's baked-in behavior. The div trick enables developers like me to achieve both. My quest continues for a still-better detection method.

OMG!!! This is soooo convenient! Thanks for sharing!

First time viewer. Great stuff. This channel is an easy subscribe.

Jesus... I'm been missing your videos. Just noticed that I wasn't subscribed to "all". Fix now 🤗Keep up the great work you are doing Kyle!!!

Really Helpful, thank you mane!

8:41 I've been familiar with modals for over a year, but it wasn't until I watched your video that I discovered the save form inputs feature doesn't require JS. That's a fantastic revelation! 7:50 I have a small tip for those who declare global CSS variables using :root{}. Keep in mind that you cannot apply them to the backdrop because they are considered 'undefined' within the same module level as the :root{} and they're considered out of scope

@puneetsharma1437

Жыл бұрын

I am doing that over a year

@MaverickDriver95

Жыл бұрын

The top for 7:50 is good info. How would you fix this?

@RogerHNobrega

Жыл бұрын

I always watch Kyle's videos before I sleep... This time I dozed off with my hand on the phone's keyboard. Sorry for the emoji spam lol Spent 10 minutes deleting emojis here

@IStMl

Жыл бұрын

@@RogerHNobrega wtf

@RogerHNobrega

Жыл бұрын

@@IStMl Sorry bro! read the above comment lol

been using this one for a looong time now. Amazing

😲 you are amazing, thank you so much for sharing your knowledge. 👏👏👏

Just needing to do one of these thanks, perfect timing

great and easy explanation of everything here, what a nice feature!

As usual, super fuseful!! Thanks!

always clear, concise and knowledgeable

That is a real nice introduction to the dialog element! I was aware of it, but did not dive into details until now. Since I was a little set back by the whole "getBoundingClientRect"-thing, I prodded a little bit around. Although you can not distinguish between Dialog and Backdrop on click, you can, however, get rid of the "getBoundingClientRect". 　The PointerEvent has "offsetX/Y" properties which are negative when the click is left of or above the dialog. Further "offsetX > modal.offsetWidth" holds for clicks right of the dialog and conversely "offsetY > modal.offsetHeight" for clicks below the dialog. 　I do not know, however, if this still holds for very big dialogs - still could, I guess.

Awesome video, thanks Kyle!

Wow, that's amazing! Thank you! 🔥

Wow, great video, nice feature, I have so many ideas to implement it.

This element is really amazing. We all remember having spent hours to just implement this which can never be as good as what we can get with . I have a small tip for you- in the close modal example for forms, you must keep the submit button first because they have also made dailog input to automatically click the first button on the form when you press enter & we want that behaviour to be submit!

Dude, best channel ever! Kudos!!

Gorgeous explanation. Thanks.

Thanks for this and the YT algorithm for showing it to me at the right time (even if it creeps me out that it knows...) . This would be perfect for HTML/JS games to display dialog and menu screens.

I figured out dialog element a few months ago and I got very astonished! This is a very good tool to make modals. I only got sad with the fact of that it is not possible natively to close the modal by clicking outside it (clicking in the ::background space), and although they recommend the getBoundingClienteRect() function, it doesn't work correctly when your modal has border-radius and you click on that specifcly space. But I think it's going to get better in the future.

This is game-changing! I wish stuff like this made it into HTML/CSS/JS more often

@ADubois639

Жыл бұрын

You should go read the HTML docs. A lot of native elements have been introduced over the years. Dialog elements have been around for a few years already, just not widely known

This is really great man!

Awesome content! Thanks!

Nice job! And a new subscriptor for you

You never cease to amaze Kyle.

thanks a lot for that! helped a lot

Very useful !!! Thank you

Great video. Thank you. I suggest for next video a practice about a carousel of images and modal window show us the image. When user click on the image , image pop up and and the other images fade.

Thank you, my projects are now tab safe.

👌👍🥳 awesome element! great news, everyone!

Kyle, you are THE MAN (intended as a compliment).

great post, wasn't aware of this. also, I'm concerned about your second guitar leaning on the stand.. too many headstocks have broken that way (once to me!) so please be careful! haha

Thank you so much for the tip

Finally, something! I still don't understand why for so many years HTML doesn't have such simple features like population of or / with an array. Or even to populate a table you need to create elements or deal with strings and innerHTML

@thatanimeweirdo

Жыл бұрын

dynamic DOM changes is exactly why JS exists.

@zebraforceone

Жыл бұрын

You're talking about logic there. HTML is simply a container, it has no concept of logic. For logic we use JS, or, to build on that you could use something like JSX.

@HBStone

Жыл бұрын

But you *are* populating with an array... of elements. Markup is markup, the only way to represent data structures or anything else in it is with elements.

Great code demo dude, thanks

Thanks for the video, Kyle! These features should have been implemented a long time ago. At least it's good that we have them now. But that backdrop moment, being unable to close on click, is still disappointing 😄I hope they will provide us a way to close modal by clicking on the backdrop, because it's quite a common feature.

Looks nice and simple to use. Can you also animate the modal when is shows and close?

@AntowaKartowa

Жыл бұрын

Seems not. Tried to apply (.modal[open]) opacity or simply background color transition, but it didn't work. Even if it would work with appearing, it won't with disappearing anyway. To use benefits of dialog element and animate you will have to add and remove to dialog class with animation styles.

@ridass.7137

Жыл бұрын

of course not!

Thank you! You remind me of the guy from Let's Get Rusty, Bogdan I think. Great presentation; thanks again!

But the scrolling is kind of a problem. How do you get rid of that? I don't want the page to scroll when the modal is opened up.

Really nice! Will definitely be using this. There is one problem I ran into though when trying to use this in React, and i'm a bit surprised this isn't natively an option for the dialog element: usually when I build a modal I want people to be able to click away the modal by clikcing the underlay. I tried to build some solutions for this, but I ended up writing more code then if I would build a modal from scratch. Did you find any solutions for this? Cheers!

I will definitely be using this element in my latest project.

You earns a new subscriber...🎉🎉🎉

I hope they will do the same with a search element. HTML5 is doing great

Thanks so much for this! Is there no way to open/close the modal with its full functionality in pure CSS?

This is amazing!

bruh, it was introduced in chromium 37 (2014). we just weren't focusing on it all this time ;)

When I clicked, I was hoping this was a video showing how the world had reinstated the synchronous modal which was removed after IE 5.5, the showModalDialog(url) method... it was synchronous just like confirm(message). Confirm() can only show a text-message and return OK/Cancel, but showModalDialog() could show and return whatever you wanted. And you could have your code in one place without needing to scatter it among callback methods and global variables... But, as always - great video!

Thank you! :)

Finally! A true Game Changer! Subscribed!

This is 🔥☄️ loving this new dialog element

Could this tag be used to make a collapsible sidebar as well?

This is super helpful!!!

Very informative, Thx

Nice and informative video. Only I'd change the title, since this element is not really "new", Chrome 37 already had it many years ago.

Great content!

Great video! Regarding the cancel button: It feels weird that the cancel button still of the submit type. Would that work with type="button" as well?

@HBStone

Жыл бұрын

I was thinking that too, or even type="reset" if you want Cancel to clear the form while closing the modal... At least I thought it was weird that both buttons saved the input, I wouldn't expect that as a site visitor.

Great video!

thanks for this video !

Very cool! How is the availability in the browsers?

The dialog element is great, but unusable really for Route based modal experiences using SSR frameworks - just the one downside to look out for. Great video!

Amazing thank you so much. I suppose it works perfectly as jsx???

I love this , saves a lot of time

Dope element! Didn't try, but seems like using it with react would be hard.

This is awesome! When do you think it will be safe to add to a production site? For now it seems safari and firefox started supporting this only recently

Excellent quick overview - but what about browser compatibility? Can I safely junk all my all jquery etc code?

wow awesome dialog tag!!😮

ngl the timing of me finding this out is perfect because i was just working on a modal for a project iam doing

Very nice this dialog Element, I am having some problems to update a Modal component I have in one of the projects I'm working on, but it's normal, it's a new Element and I don't know how to use it very much.