Oh, and welcome in the upcoming section, we are going to be building out a pop up message.
So this is going to be a useful type application where the user can press an element with a specific
class and then we can open up a pop up message in regards to the contents of that element.
Let's try that out.
And first of all, we need to build out our HTML, so let's set that up.
We need to have a container where we've got our output content.
So this is going to be the actual pop up element.
So all the contents in here, this is what we're going to be popping up.
So setting up a button and we're going to need a way to close it.
So adding in a class, we can call this one close and pressing this will close the popup.
And then we also need a message area so we can select that, give it a class of message.
This is where the message content is going to go and we can just put no content yet.
So we've got some default content in there.
Next, we need to set up some elements that are going to actually invoke the pop up.
So setting up a div, give it a class and this could be any class name for this one.
I'm going to have give it a class of pop up.
So any of the elements that have a class of pop up will be able to do the pop up message and then we
need some data in order to output that pop up information so we can just call it data message.
I'll just do this lower case.
This is the attribute that we're going to use that's going to have the message contained.
So the first one can be Hello World.
So the idea here is that you click this element that says click me and you get this hidden message showing
up in the pop and we can refresh it.
And you can see there's not a whole lot happening quite yet.
We've got a close button, doesn't do anything.
We've got no content yet and we've got to click me, which doesn't do anything either.
And we're going to apply all of the functionality with JavaScript.
Of course, let's generate a few more of these, create a few more of these.
So remember, needs to have pop up and it can have a message.
JavaScript is fun and of course it is.
And this one can have the hidden message of JavaScript.
And you could type in whatever content you want and you can utilize these within your website.
Throw it the website.
As long as it has a class of pop up and it's got the JavaScript, it's going to be able to grab that
information.
So now we've got our elements here that are going to have the hidden messages, we've got the clothes,
and we need to do a little bit of styling to make this look better.
And I usually don't try to focus too much time on the styling, as I do want to focus more on the JavaScript.
But in this case, let's do a little bit of styling so that it does stand out and we can see the content
a little bit better.
So font family, we can do this cursive and we've got some border to it.
Text line center Asialink to do the cursor to the pointer so the user knows that these are going to
be clickable and we are going to make them clickable with JavaScript, of course, and then a default
width so we can set this to 200 pics.
So see what that looks like.
So now we've got a few clickable areas and we need to update and create that output area.
So its first style are close button.
So this is that little button in the top hand corner that the user can close so we can position this
absolute so set it up in the top corner.
So maybe 10 picks off the top on the right hand side.
So do ten picks off of the right.
And let's do a background colour for this.
And the font color can be white and the font size.
Let's make it small so it's not very too intrusive.
So a.T.M so suit this looks like.
So we've got a close button.
And lastly, let's also style our output area so that we can move that around the screen so that we
had a class of out.
And so this is just some default styling.
We can have a background color.
So it stands out.
It's different from the regular and wherever we want to position its position, it left twenty five
percent and give it a width of fifty percent.
So that will center that element automatically.
But this is just so that we can distinguish where the element starts and ends.
So there we go.
We've got our content and you can also set default height for this as well.
So if you want to always have a specific height to so it's always at least twenty five percent.
Also, let's add in and update some of the message area text align center and do a different font family
that's got picked some of these default styles and let's try that.
So no content yet.
And we also need to counter that that message at the top.
So adding in a margin at the top.
How but we do twenty picks at the top, so the content is always not underneath the clothes buttons.
We want to try to avoid that as much as possible.
So it looks like we've got our content and we need to have one last thing where we want to be able to
add a class of height.
And what the class of hide is going to do is it's going to basically hide the element that it gets attitude.
So do a display none.
And then by default, now that we've styled our element, our pop up message, we want to hide that.
As well, and we can also actually move it off the top, so if maybe want to do 10 percent off the top,
though, that's not always sitting right at the top.
So there's our our elements and we can add the last class of hide to it.
And that means that with JavaScript, we can even hide it and hide it as needed.
So it's always great to have this option.
I have a class that you can add and remove, and with JavaScript, it's really easy to add and remove
these.
And I'll show you how to do that in the upcoming lessons.
So now set up your basic structure of your elements and we're ready to move on to the next step.
So make sure that you do have some elements.
Give it a class, the same class so you can call it pop up, add in an attribute called data message
so that you've got some type of message information that you can have and that we can output into the
pop up and then also create that pop up area and then apply some styling to make it look good.
So add that in and you're ready to move on to the next step.
We're going to bring the JavaScript and I know that's what you've been waiting for.
So JavaScript is coming up next.