Popup Modal Dialog with Javascript and HTML

Key Takeaways

what's up y'all this is the same NASA from IgM 3 where we discuss software engineering by example and in this episode we will discuss how to build a pop-up in HTML CSS and JavaScript so a pop-up is its look like an illusion dialog that show up on your page and you can interact with it is that's that's simple so we're gonna show something like that so that's that's what we're building here so I'll pop up so JavaScript and HTML doesn't have pop-ups out of the box right so what we're building here is an illusion of a pop-up so what you're seeing here is when I click on that button I essentially have one big div element that stretches the whole screen that's the grayed out black transfer thing that you see in the back end and another rectangle or another div elements or two developments the second div element is the content the first one is the container and then the content we start showing the message or the dialog that's it that's that's exactly up what a pop-up is so it's very simple alright so and then if I click on any outside on that div element that is kind of hidden there I I hide I had the whole thing so how about that let's let's just start to build that how about that guys alright so we'll start from scratch I'm gonna use Visual Studio code very nice editor right so as we call it pop-up just pop up with HTML and let's just start building HTML here that's very simple stuff head I have fat fingers because I just got my finger so at the bandaid there so what we need to do is to the body and we'll just try to copy that latin text right here and I'll just paste it I wanna warn what I'm doing alright so we'll just I'll take that alright that's a simple thing all right oh but we start pulling usour here that's much better all right so the new page is test pop-up page right so that's that's the page right imagine this is your webpage that's the website day you already have and you want to add a dialog to it when you click up on it so first obviously you need a button right so let's add a button here called show and it's named show and let's refresh that well what does nothing what I want to do if I click that I want to show that dialogue order so the dialogue consists of two developments as we agreed right guys so there is a div called let's call daddy pop-up container and inside that container there is another pop-up content right so that's your message that's where this is my pop-up right that's your pop-up message and you can do fancy stuff I don't know make it hit or to me whatever right so you can do with a message actually here and that is the pop-up container will be the whole thing so obviously we don't have any code that does that now but we will assign classes styles to those puppies right now okay let's do a style about that guys do a style and I'm gonna call my first style pop-up container guess what pop-up container the second style is guess what pop-up content right and the public container you guess that guys right so has to fill the whole screen so 0 left top 0 width 100% height only percent all right position obviously not relative we need it fixed right because we were specifying those numbers and we need a color so we have give it and a black color RGB 0 0 0 which as in for black but I'm gonna give it like 50 percent transparency okay I think that's all I need right wait we need one more thing yeah so in that container hope I still have the old one yes so if you notice in the old container we have this space right here so that container is padded on the top with a certain number and that's what we add right so you can just add padding top I don't know 300 pixels so you can pad didn't spill that because I didn't have that all right so that's the pop-up container the bubble content no much there to say really but you can just add a background color and I won't add a color of yeah chartreuse why not okay and maybe I give it a certain height of 200 pixels that's the dialogue remember guys and the width of this maybe I want to 80% so that's like I want it to be like 80% of the screen okay the next thing we want to do is assign those guys right so the class of this pop-up container is pop-up content and this guy is pop-up content and what happened here you are just another okay well good so now if I go back to my thing here you notice right it just like added that thing immediately right and it's like that pop-up is like on to the left and that's because we don't have a margin assigned once you assign a margin for that content you say hey style or cell phone margin so it says it's like go in the center essentially that's what it does right so that's like this is my pop-up right but if I click anywhere it's not closing why because we don't have any JavaScript code that does first of all first why when I open the page I don't want it to start immediately right so that means that container should be guess what guys hidden that's display:none don't show it to me by default okay so I do that it's it's not showing but if I click this nothing also showing because guess what we did ad code JavaScript code that says hey when use someone click on this you know I go ahead and show it we didn't do that so I'm gonna create a variable cost show called document I'll get the element by ID show and then show dot add eventlistener click and then you do e add a function if someone clicks on this button go ahead and show that pop-up container but guess what we don't have a pop-up container object do e right so we have to create a pop-up container ID let's get it by ID there guys and all we have to do is style dot display because guess what block go ahead and show it block means show nan means hi right that shows it so let's refresh and see show nice nice but I can't close the guys I need to close it so I guess what if I want to click anywhere here on this gray thingy right I want to close it so what is that great thingy it's nothing but the pop-up container right so I wanna add an event listener if someone to click on me go ahead and close me which is essentially hide me which is essentially Paul container that style the display equal men all right I'm gonna share the code guys for in the description below so don't worry about it if I type too fast and then look at that that's the pop-up right there guys that's Edie alright guys that's all for me today you can play with this style to change the color of the background color like you can make it let loads for quasi or something else so it doesn't have to be like black but black like that why the grayed out think gives an illusion of a disabled right button so that's what we want here that's why I made it like it's like slightly gray alright guys that's all for me today check out the other content in software engineering by example and I geometry we talked about a lot of software engineering we have a lot of tutorials JavaScript VB C sharp and a lot of GIS that's my specialty geographic information system check out the other content guys and I'm gonna see you in the next one you guys stay awesome