Click Outside to Close Modal | Close HTML dialog Element by Clicking Out

I've already shown you how to create modules in another video in this one I'm gonna show you how to make it so the user can close it just by clicking outside of it by the way before you get started if you're here I'm sure you want to become a programmer and yes here on YouTube you can learn a lot but one of the best ways to actually improve especially if you want to turn this into Korea is to take some courses made by experts in the field usually these courses are structured in a way that makes it easier for you to learn properly and I've selected for you some of the best courses and learning platforms you'll find the links in the description down below and by using those links you're gonna help this channel as well so I'm using the same code as the one I used in another video where I explain you how to use the dialogue element to create the module so leave this open and go and watch it I'll leave the link in the description box down below and in the cards up above and then when you watched it come back here okay so how can we make it so that when we click outside the module and actually let's actually do this when we click here outside of here the module is actually closed how can we do that let's see first one thing okay so let's open the developer tools like this okay so if we go here as you can see the dialog covers the whole screen with the margin so this is the dialog and the actual yellow thing around is the margin of the dialog okay so it covers the whole screen so wherever we click okay whether we click here here here here Etc we actually are clicking on the dialog and this is a good thing because we cannot even listener to the dialog element and close the dialog when we click on it okay so let's do the first and then see why it doesn't actually work as expected so let's go back to Let's actually close this let's go back here okay so first of all as we are going to use the dialogue element more than once we can actually add up here and do something like cons dialog element okay something like that document click selector dialog okay so that I don't actually have to write document quiz etc etc so we can change that here you can do something like that and then we can do something like that and that's the same thing then here we can do something like this so dialog element listener click like that dialogue elements close and this means that when we click on the dial element the dialog is actually closed so let's try if you click here that's fine it works but also it works even if we click inside of this module right if you click here the dialog is closed but it doesn't make sense right it's not what we want we actually want to close the dialog when we click outside not inside of the dialog so we need a way to actually understand if you're clicking outside or inside and as I said let's go back to our developer tools as I said this diode covers the whole thing here you've got dialogue because you've got the margin of the dialog and here you've got the dialog inside the dialog right but still the whole screen is covered by the dialogue so how can we actually understand if we're clicking inside or outside because wherever we click we actually click on the dialog and that's actually where the events Target property comes into play and let's see what we can do with it so here instead of actually having just dial close let's actually target the target property so of course here you need to add the event which is passed automatically by JavaScript then we're going to log the event Target like this the target property is basically the element where the click happens so if the mouse is over a specific element that is the target okay by the way if you like this Channel and you want to support it and you want to actually help me keep making videos like this you can do that by becoming a member of my patreon where you can also get exclusive perks I'll leave the link in the description for those of you who are interested so let's actually see that so if you click here outside you're clicking on the dialog as you can see the margin if you click here you're clicking on the module container because the module container is a child of the dialog so it is sort of on top of the dialog and then if you click here you click you target the paragraph So basically the paragraph is on top of the module container and the model container is on top of the dialog okay so if you click here you're not clicking on the dialog by your clicking on the paragraph the first Target is the paragraph here the first Target is the modal container here the dialogue all right so let's actually close this and now you might be wondering why does this event get triggered even when you actually click on the modal container so if we do something like if you bring back the curves like that and then we open this and we click so now we click on the dialog and we get dialogue and that's fine because we're actually targeting the dial element with the event listener but if we do something like this we're targeting the modal container so why does the module close because if you think about it you're not actually clicking directly on the dialog element which is the one with the event listener but we actually targeting directly the module container and if you're clicking on the paragraph We Are targeting the paragraph not the dialogue element right and this is due to event bubbling or propagation which means that if you click on a child of one element The Click goes up and up and up apparent by parent until it reaches the body which means that in this case when we click it's like clicking on the div itself so if we click here it's like clicking on the div the module container but then they click propagate let's actually use the inspector so you can see that button all right so when you click here you're clicking on this but then the click propagates and goes up and it sort of clicks the parent and then it goes up and it clicks the main container and then it goes up and it clicks the body etc etc etc okay so that's why even when you click on the module container they click still reaches the dialog and the event is triggered and the actual diode element is closed so if we had the event listener on the let's say main container this would have been triggered anyway because the click happens on the module container then it goes up the dialogue and the main container and then this gets triggered by the way if you're finding this video helpful please hit the like button and also subscribe to the channel as well so now that we know that it's quite easy right we can actually just close the model only if a Target is the dialogue itself okay because if we click inside the module the target is either the motor container or the paragraph in this case and if you click outside our Target is the dialog element so let's go back here so console okay so as I said if you click here it's dialog but if we click here it's motor container okay so now we know that when our Target is the dialog itself we're clicking outside when our Target is something other than the dialogue itself it means that we actually clicking something else inside the dial so here the module container or here the paragraph and so on and so forth okay I hope that makes sense so how can we actually do that that's really really easy let's actually do this so we need to do something like if event Target is equal to dialogue element then I'm going to close the dialogue element if not we're not going to do anything right because we know that we're clicking inside of the module where we have our model container that covers the whole thing so we are sure that when we click inside the container inside the module we are always getting something other than the dialog when we click outside we know for sure that we're clicking on the dialog because we actually clicking on the margin of the dialog itself so I hope that makes sense I know that I've been repeating things over and over but I just want to make sure that you actually understand what I'm doing understand what's going on I don't want you to just copy and paste things so that's why I repeated things I'm sorry if you got it the first time but I know a lot of people actually find it difficult to understand certain Concepts so I'd rather repeat things so that everyone can actually understand them all right so now we've got everything in place so let's actually try to see if that works as expected so if you click inside nothing happens if you click on the X up here of course the module is closed but if we click outside same thing the modal is closed as you can see here nothing nothing nothing here the module is closed if you're still watching and you want to learn more about web development watch the video you see on the screen right now and don't forget to check out my patreon and also like the video and subscribe to the channel as well and I'll see you in the next one bye

Channel: Fabio Musanni - Programming Channel

Views: 4,083

Keywords: web development, web dev, css3, css tricks, css tips, programming, HTML dialog tag, HTML dialog element, close modal dialog clicking out, click out to close modal dialog, dialog HTML click out, click out to close modal with javascript, clicking outside to close modal using JS

Id: 5vQntu9bZCM

Length: 9min 24sec (564 seconds)

Published: Wed Aug 30 2023