EASIEST Way to Create Popup Modal Using the New dialog HTML Element

in this video I'm gonna show you how to use the native HTML dialog element to easily create models 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 here I've got my basic structure I've already changed the title and linked the style sheets I actually linked the font awesome style sheet because I'm going to need the icon I've actually made a video on fun awesome if you want to check that out leave the link in the description box down below in that video I actually have the main.css file and the font awesome folder inside the CSS folder in this case I don't have that folder I have everything in the root folder whether it's the HTML file so just keep that in mind when you're linking the style sheets also I have my lifestyle server running and also prettier running I've made videos on those things as well so as I said all the links will be in the description so first of all I'm going to have a div and I'm going to have an ID the main container like this then I'm just going to copy and paste a few paragraphs so that we have some content in our page like that and then down here I'm going to create a button click me so let's actually style the paragraphs a little bit because right now we've got something like this so let's go to our main CSS and let's start with our body margin 0 like that then paragraph font size 25 pixels and this is basically just to show you to actually increase the font so that you don't need a lot of paragraphs and you can scroll up and down that's just something that I need for the video and then Main container adding 150 pixel something like that and we've got something like this as you can see we can scroll up and down okay perfect then let's go back to our index.html and first of all I'm going to show you how the no modal version of the dialog works and then we'll switch to the model version so first of all we've got a dialogue like that instead of here we are going to place a paragraph I am a known module dialogue perfect and of course we need a way to open this dialog otherwise you you won't see that as you can see you don't see that right so we're going to add a little bit of JavaScript okay so script and we're going to actually show this dialog this new model dialog after two seconds so set timeout then just adding window like that after two seconds and inside of the function I'm going to do something like document or you selector dialog UE okay so I'm targeting the dialog directly by tag tag name of course if you've got different dialogues you need to add an ID so show is actually a method of the dialog element of course to show the dialog and now as I said I'm going to save it and refresh the page and we'll see the dialog okay let's refresh it as you can see two seconds and see the dialogue down here so as you can see the dialog is placed here and it's placed here because this is the position on the HTML file so as you can see you've got the dialogue here but let's actually move this and place it here for example right so if you refresh it we don't see anything and then you can see that it's placed under the first paragraph because this is where it's placed in the HTML file and of course as this is a no modal dialog all the elements under it as Theo working right you can select the text you can click the button etc etc whereas when you have the module you won't be able to actually select things and do things beneath it so since this video is about how to create a module okay I'm not going to talk about this too much this was just to show you the difference because now we're going to create the module version of the dialog so to create a model dialog which will be placed in the sense of the screen we just need to use show model instead of show okay let's actually try that so down here instead of show we're going to use show module and let's actually also replace the thing here I am like this perfect so let's see what we get so let's refresh it two seconds so as you can see now the module is placed in the middle of the screen and being with a module all the elements beneath it are not active you can't click the button you can select the text and also as you can see the background is sort of darkened and later on I'm going to show you how you can change the background color here we can also open this model just by clicking the button instead of actually waiting two seconds so we can actually do that and by the way you can move this dialog wherever you want and that's the same thing okay so you can do something like this by the way if you would like to support this Channel and help me keep making content like this you can do that by becoming a member of my patreon where you also get exclusive perks I'll leave the link in the description for those of you who are interested so I'm going to actually delete this and this and do something like query selector [Music] button click like this that okay so now the dialogue will be shown when you click the button so let's try as you can see that worked right and of course you can style the module however you want the only important thing is that you can't use the display property because otherwise the dialog is going to be shown straight away let's actually try that so main CSS let's actually use the dialogue tag because this is the only one I have but you should use an ID or whatever if you've got more than one so 60 of the screen then hide sixty percent of the screen so using the percentages here works the same as the viewport height and width because the dialogue width and height are actually always relative to the viewport at least that's what I noticed after testing it a bit okay then the background color white the book Shadow if you want to add a little bit of Shadow you can do that I just decided to use this color to make it like subtle not too much too dark then border zero okay and then let's say that you want to Center the text and you use the display Flex property Flex okay and then you do something like justify content Center and then align items Center let's see what we get so as you can see the module is already there because you're using display flex and the browser actually sort of uses display none until you actually click the button and you call show model but in this case as you actually use display Flex already here that is already shown and when you click then it works like that but you want this to be hidden and then show up when you click the button so you can't actually use display Flex here so let's comment that out so to send the things inside the module you need to use NADA div so here you need to do something like tip then you can do something like container and then set up here you use the paragraph Okay so you've got this container and then in the mean CSS okay so let's actually first add the font size for the paragraph just to make the text a little bit bigger we could have used H1 whatever and now we can actually Center the things inside the module just because we've got container and now we can actually use display flex but first we need to style the container so that then margin zero and then here display Flex then justify content Center then align items Center and also positional relative because we're going to need it later on so let's see if that works so everything works as expected because you you don't see the dialog you click and that's it as you can see that actually works so as I said we can change the color of the background here of the overlay let's call it like that and we can use the pseudo element backdrop so dialog backdrop background black and you'll see that there's going to be two dot right if you like it well that's fine but I'm just going to use a positive 60 percent so I want it slightly darker than the original under it still everything you can scroll up and down but you can click on the buttons Etc as I said earlier and now there is only one last thing that we need to do we need to find a way to close it because right now how can you close it you can click on anything to close it right so actually I haven't told you that there is actually already a way to close it which is hitting escape and let's see that Escape as you can see it works but it's not that intuitive in my opinion and also we want the user to be able to close it using the classic X on the top right corner okay so let's first add the icon so let's go to index.html okay by the way if you're finding this video helpful please hit the like button and also subscribe to the channel as well so first of all up here we can do something like this so here I'm using font awesome which I made a video about so if you want to check that out I'll leave the link in the description box down below so inside the dialogue we can actually do something like this so I'm actually going to copy the code from font awesome like this I've got my old.css style sheet here so that's fine and now we've got our icon so we should see it as you can see here but of course that's not the right place the right size Etc we need to style it a little bit by the way I'm also going to make a video on how to actually close the model by clicking outside because currently you can't do that right so first of all I'm going to remove the padding from the dialog so here poding zero okay then down here I'm going to do something like close by the way I haven't mentioned that I actually added the ID so I got this from font awesome and then I added the ID so make sure you actually add it so close model like that so position absolute and that's why I actually added the position relative here okay then top 10 pixels right 15 pixels and then since we actually used the font awesome icon we can change the color like this just color black and we can also change the font size really really easily 35 pixels like that and of course we also want to show a little hand as if it were a button okay so close module hover like this and we want the cursor to the pointer let's actually see how that works so you've got your install icon here as you can see the cursor doesn't actually change but why because it's probably not on top of everything and we need to use the Z index so here we can do something like closed module Z index one is enough but of course you need to make sure that you are using a number that is high enough okay if you've got other other things going on in your website so let's save it and see if now it works so let's refresh it click me okay so you've got this module you go here as you can see the cursor actually changes and if you click nothing happens why because of course we need the JavaScript code to actually close it so let's actually go back to our index.html down here and we need to add a little piece of code to actually close the module right so document query selector we're going to Target the close icon like that then click then the function and of course you can actually do something like this like that close Okay and now everything should work so let's actually try that out so click me you go up here you click the button and the dialogue these are this as I said I'm also going to make a video on how to close this module just by clicking outside of it so if the video is already out you should see it on the screen so go and watch it also 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 soon bye

Channel: Fabio Musanni - Programming Channel

Views: 418

Keywords: web development, web dev, css3, css tricks, css tips, programming, HTML dialog tag, HTML dialog element, modals using native dialog HTML element, how to create modals, HTML dialog element to create modals, popup modals using dialog element, pop up modal using HTML dialog element, the easiest way to create modals html css javascript

Id: Qnpi6e_XMQ8

Length: 14min 11sec (851 seconds)

Published: Wed Aug 23 2023