This lesson is going to be the model up, pop up, so we are sending a message to the user into a function
called pop up.
So let's add that into our project and have our motile pop up pop up.
And we've already selected under the age object, the motile one object on elements from the screen
so we can apply a style to it and applying a style of display block is going to show it.
So this should actually show the objects.
This will show the object.
When we hit start game, we get test content.
So we also need to fill out some information here.
And of course, our clothes doesn't quite yet work, so we need to take care of that as well.
Within this lesson, we've got our mortal body.
So this is the body of the model one and setting up inner HTML and the inner HTML will be whatever the
message value is that we've sent through.
So we've got select a case, click any of the cases below.
So we've got our instructions popped up and ready to go.
So we need to take care of a few other things and that's in creating that interaction, the ability
to close all of the pop up message.
So this message, we don't necessarily need an action.
We just need to be able to close it from our code.
So let's go down below.
So let's add in the actions for closing the pop up.
And we do have an element here that this one is called the this is close.
So we can select that close object and give the ability to close it.
We don't need to add it into the page object because this is going to be a one off type action and this
is going to be always available.
So available at the document query selector and adding in this event, listener for the closed class
is going to take care of closing that popup window.
So it's going to give the user the option to close it.
So selecting close and we're adding an event listener and the event is going to be listening for a click.
And whenever the click happens, we're going to close the pop up.
We're going to create a new function for that.
So it's going to close the popup window.
And then we also want to add a window object in this window.
Object is going to be on click.
So whenever we click on the window, anywhere within the window, if the event object and we want to
check to make sure if that e target because we're listening on the entire window object.
So we want to make sure that the target is going to be equal to the page model.
And that's the page Motal one element.
So making sure that that got clicked and if it did, then we're going to do the Close Pop-Up function.
So we're going to invoke that function.
So that means that we need to still create that.
Let me update how it looks because I don't want it to have the word drop so that we have it all on one
line.
I'll make it a little bit bigger so it's a little bit more visible.
So creating our function.
So we need a function that's going to close the pop up and we've called to that function a couple times
in the script.
So let's create that function in order to handle that.
So this is going to close the popup window whenever the user either clicks anywhere off the model on
the X, the closed class, selecting the page model one element, and then we're going to play a style
of display, none to that element.
So it's going to hide the pop up window logic that we have to apply here as well, because this is where
potentially we might have another offer that might be made.
So there might be quite a few things that are happening here.
So this is where we have to add offer logic and we're going to have some additional game logic that
we're going to add in this function.
So we're not going to do that quite yet because we just want to make sure that everything is working.
I can close the pop up, I can refresh, I can click anywhere in that closes the pop up.
So we've got the messaging system set up and we need to still add in quite a bit of logic into the game.
So that's still all yet to come.
So go ahead and add in the modal capability into your project.