Create a modal from scratch | HTML CSS & JavaScript

in this video i'm going to show you how to create this modal completely from scratch let's get started so to get started i'm opening up an empty codepen project at the top of the html i just have a head tag with a link to the font family i'm going to use for this project and then beneath that i have body tags which are empty so in this video tutorial i'm going to go over all the html css and javascript to make this welcome modal so to begin i'm going to jump inside of the body tags of the html and to get started first i'm just going to include some content on the page so that way when the user initially lands on the document they actually see something so i'm just going to include an h1 and it's just going to say dashboard view this is just placeholder content for this demonstration so when the user initially lands they're going to see this text and after a certain number of seconds i want that modal to appear so beneath this i'm going to create a div with a class and id of modal which will hold the entire modal design and within this element i'm going to have a div with a class of modal container that will hold all the text for this element so for this modal container i'm going to include an h1 element with the text of welcome and then i'm going to include a paragraph tag with some other text so beneath these elements i'm going to contain two buttons which will allow the user to either start the tutorial or skip it so i'm going to create a div with a class of modal buttons that will hold both of these buttons and first i'm going to add a button with a class of button secondary because it's going to have the secondary button style i'm also going to give it an id of modal skip because it will allow the user to skip the tutorial and i'm just going to add the content of skip the second button i'm going to give it a class of but in primary because it is going to have the primary treatment and i'm just going to have it say start tutorial so this is actually all the html that we need for the project and everything else will be completed within css and within javascript so to get started first i'm going to jump inside of the css now i added scss as a preprocessor here which allows me to be really organized with my css code and also declare variables so if this is brand new to you and you're using codepen you can click on this little gear icon and under css preprocessor you can add it here to your project if not you can just use regular css so first i'm just going to copy and paste some color variables for the project and beneath that i'm going to add the basic styling that i add to every project i'm just going to set the box sizing set to border box and a margin padding set to zero universally so then underneath that i can actually start applying styling for the project so first i'm just going to reference the body and i'm going to set the font family to the family that i referenced in the header of the html i'm going to set the color of the text to a particular color and for the landing state i want that dashboard view text to be in the center of the page so i'm just going to set the display of it to flex and then place items in the center and i'm also just going to set the height of it to 100 of the viewport height so now we can see that the content is in the center of the page but we have to do a little bit of work to make this behave like an actual modal right now it appears as if all this content is just on the page but i want this dashboard view to be the element on the page and i want this to be a box that goes on top of the dashboard view so beneath this i'm going to reference the class of modal which again holds the entire modal element and first i'm going to set the width and the height to 100 and i'm also going to set a background color to 50 black the reason why i'm doing this is to add an overlay so that way the modal stands out even more now i want this overlay to be on top of the entire screen so the way i'm going to do that is by setting the position of the modal to absolute and then i'm going to set a top and left to zero so that way it will start at this area so now we can see that the overlay is on top of the entire page for the actual modal i'm also going to set the display of it to flex with a place item set to center and initially i don't want this modal to be interactive at all so i'm going to set the pointer events to none so beneath this i'm going to apply styling for the actual container which holds the text for the modal so here i'm writing and container and i'm going to set the background color to white i'm going to specify the width to 26 rem i'm going to add a little bit of padding and i'm also going to add a border radius so now we can see that styling on the page next i'm going to apply styling for this header i'm just going to set the h1 to text align center next i'm going to apply styling for the paragraph tag so here i'm going to reference the paragraph i'm going to set the line height to 1.5 rem so it's a little bit more condensed i want there to be a line between the header and the paragraph so i'm going to add a border top one pixel solid and a light gray and i'm also going to add some padding of the top and bottom of one rem next i'm going to work on the buttons so beneath this i'm going to write and buttons which represents the container that holds those buttons i'm going to set a margin top to 1 rem i'm going to set the display of this to flex with a gap of 0.5 rem and i'm going to justify content by setting it to flex end so now these buttons are pushed towards the right side of the modal next i'm going to work on the styling of these buttons now because i'm going to use buttons throughout this project i'm just going to have it outside of this entire modal element because i don't want these buttons to only have the styling within this modal class so completely outside of it i'm going to reference the button element and for the buttons i'm going to set the font family to inherit i'm going to set the padding top and bottom of 0.4 rem left and right to 8 i'm going to set the outline to none the font size to one rem and the cursor to pointer and i'm going to add a border and a border radius next i'm going to work on the styling for the primary button and the secondary button so beneath this i'm going to reference the class of button primary and for this button i wanted to stand out a bit more from the background so i'm going to add a background color which will be the primary color and then i'm going to modify the color of the text and for the secondary button style i'm going to set the background color to transparent and i'm going to set the color of the text to the primary color so that way this button style has a different treatment so now we have this entire modal completely designed so this is looking really good so far but this modal actually isn't in the center of the page like i want it to be so instead of saying place items i'm going to justify the content and align the items in the center and i'm also going to do the same thing for the dashboard view behind it so now everything is center aligned now initially i don't want that overlay or that modal to be visible when the user lands on the page i only want them to see the dashboard view and then after a few seconds i want that modal to appear so underneath this modal element i'm going to initially set the opacity to zero so that way it's not visible on the page at all and i'm going to want it to transition in so i'm going to add a transition of 250 milliseconds of the opacity property with an ease in so now the overlay and the modal are not visible at all so the next thing i have to do is actually create a class that will make that modal visible on the page so beneath this i'm going to write and visible which will be a class that we will add to the modal to make it visible on the page and for this i'm going to set the opacity to 1 so that way it becomes visible again and i'm going to set the pointer events to auto so that way the buttons will actually be clickable so once i add this class we don't see a difference in the actual view and that's because we haven't assigned this class anywhere yet so the last thing i need to do is actually jump inside of the javascript to start applying functionality here so the first thing i like to do is actually declare variables for the elements in the html so i'm going to create a variable for the modal and i'm going to create a variable for the modal skip button so i'm just referencing the id of these elements from the html and the next thing i'm going to do is pay attention to when the window loads and so when the window loads i want there to be a few seconds delay and that i want that modal to become visible so here i'm going to write window dot on load and when that event occurs i'm going to run a function and the function will be a set timeout function so i'm going to write set timeout and so when the window loads i'm going to start this set timeout and for this function what do i want to happen well i want the modal to add the class of modal visible so here i'm writing modal dot classlist.ad and i'm going to add the class of modal visible and with timeout you can indicate how long you want the element to wait before the function runs so here i'm going to add a comma and then write 2000 which represents 2000 milliseconds so this is basically saying when the window loads start the set timeout which will add the class of modal visible and it will take place two seconds after the window loads great so now we can actually see that effect in the document now we have these two buttons here star tutorial would actually begin the tutorial sequence which i haven't designed yet but this skip button would dismiss the modal so i'm just going to add functionality for this button so beneath this i'm going to reference that skip button which i defined as button skip here so i'm going to write button skip i'm going to add an event listener i'm going to pay attention for a click and when this button is clicked i'm going to remove the class of modal visible so now when the page loads it waits a few seconds then the modal becomes visible and if i click skip it should dismiss it and when i do it goes away so there you go that's how i created this modal completely from scratch please let me know if you have any questions on the topic and subscribe to stay up to date with my latest content thanks for watching [Music]

Channel: Angela Delise

Views: 2,314

Keywords: sketch, ux, ux design, ui, origami, figma, product design, product designer, app design, web design, prototype, wireframe, ux process, how to, demo, tutorial, origami studios, zeplin

Id: lMFGxNURNQE

Length: 11min 55sec (715 seconds)

Published: Mon Feb 15 2021