This lesson, we're going to be setting up our HTML structure in order to use that, to build out our
JavaScript code.
So first of all, let's create a button and this is the button that's going to trigger off the modal
popup window.
We also need to build the model element so you can create that within a section, give it a class.
So this can be the model wrapper.
And then inside we'll have a device with a class for the body and adding in ahead, adding in a header
and then within the header, this is going to be the title of the model and then also adding in a button
that we can use to close the model.
Then we need another element.
So this can be for the body.
So the model main area give this one a name of model meaning.
And lastly, let's also add in a footer element and then refresh.
I'll take a look at that.
So we may also need to apply some styling to this to make it look more like a model.
So adding into our style tags, select the element with a class of model wrapper, then within model
wrapper will display block and setting it to the top and left of zero.
The width can be 100 percent height as well, 100 percent background color.
So it's going to be overly that we're going to be showing the same thing that as an Arga color.
So we can include opacity making it black and around 50 percent and we'll do an overflow of Y and attaching
a scroll option to that.
In case the content is larger than what we have within our screen size, we can allow for having a scroll
option for the model rather than setting up the model body.
Give this one a width of 50 percent moving.
It left 25 percent, top 10 percent and position at absolute.
And let's also set a background color for this.
So for now, we'll just set it as Alice Blue.
So save that and refresh.
So that's our model so far.
We need to also adjust the close button.
We can position this absolute as well and give it a position of thought and a right.
So it's in the top right hand corner and refresh.
So that gives us the option to close in just a few more adjustments to make it look better.
I'm also going to update this and give it a class of H2 so we can select it instead of having an H2,
because this is giving by default, it's giving some of the border around it.
So bringing it into there with H2 and we can apply the staling here.
So adding in a background color, setting that to block, updating the color to be white, making the
font bigger and let's refresh, see what that looks like and I'll move this one in.
Move this one in.
So it's in line as well as clean that one up is within the model mean you can apply some styling as
well and apply styling as needed till your application looks the way that you want to present it.
You can apply some styling as well for the footer.
So central line the text and I'll make the font smaller for the footer as well as applying a background
color.
And we can refresh and update the color to be white as well, to be in line with the header.
So you're going to add in just a little bit of padding as well.
So now we've applied some styling to our content.
We're ready to introduce our JavaScript.
So one last piece of the puzzle that we needed to do, and that's to hide the model.
And usually the way that I do that is I like to set all of these values, build out the model, get
it looking the way that I want it to look and then hide it.
So we will apply a class of model to that element so that we know that that's when we want to show that
particular element.
And I'll add it in for now so that we can see the model being displayed and that will be added into
the same element.
So just refresh that and then we've got our model back and we want to take the model wrapper and apply
a display property of none.
So we're ready to apply our JavaScript functionality.
So when we remove the show model class from the show model element and we're going to be applying it
using JavaScript, you're going to see that it disappears.
But we had the opportunity to structure and build out the visuals of our application.
So next, we're ready to create content to make it interactive using JavaScript.
So it's coming up next.
So go ahead and build out your model, apply styling as needed, and it doesn't have to look exactly
like mine as long as you've got the same functionality where you've got a button and essentially an
element that we can hide and show when the button gets clicked.