The previous lesson we saw how we can add a class and it was relatively straightforward, we use class
lists and a method called ADD, and the alternative is there's a method called remove in class list
as well.
So I'm going to be showing you that one.
So next we need to do is we need a way to close our model.
There's a number of ways that we want to close this model and they rely on the user interaction.
So either clicking the close button.
So it's going to be one way that they can close that model.
So once it's opened up within the object that's opened up, we can select the value for close.
We could also place that into a global object as well.
So it's all dependent on how you want to use it.
And in this case, I want to use the variable object only within the scope of the ADD event listener.
So this is what I need to select the element that is to close.
We can call it close button using documents and our favorite query selector selecting the element with
a class of close.
So it's going to give us the same option that we had where we have that element.
We selected the element and now we want to apply an event listener to that element.
So selecting that close button object that we just created and we can add in an event listener.
So add event listener and event listener we're listening for is click and we can just do an anonymous
function here where when that button gets clicked, what do we want to do?
We want to return that model.
So adding in a return value here and selecting our model rapper using class list and the opposite of
add you guessed it is removed so we want to remove so model.
So it's as easy as that to remove a particular class and now we can try that out.
So let's refresh and hit the close button and boom, our model disappears.
So there's a few other ways that we want to close our model.
So let's add that functionality in as well.
So we have our model wrapper, which we can make interactive, just like the other elements where we
can add an event listener and event.
Listener, of course, is a click that we're listening for and then we've got our function and the code
is going to be the same where we're closing the model so we can do a return of the model and this will
close down the model the same way.
So this is a click just outside of the model, but over the overlayed.
And once we click that the same way, it closed down.
And there's also one other one that I want to show you.
So there's one other event listener that we want to listen for, and that's event on any one of the
body of the elements.
So selecting our main body, using documents, queries, selector, and we're selecting the body tag.
So this is going to be all of our so anywhere, the user, anywhere the user has focus on the page is
going to be captured underbody.
And we can add an event listener just so as we had the other ones.
And this one is going to be actually a little bit different because this isn't going to be a click.
We're going to be listening for Key Down, and that's another event that you can listen for.
If Key Down is pressed, then we invoke the anonymous function and you guessed it, we're going to return
the modal wrapper class list, remove.
But there's one other thing that we need to do and we need to track which key got pressed.
So let's try that out.
And for now, I'm going to log out the key values.
So there's every key on your keyboard has a key code.
Once we refresh and we open up our model.
Now, if I click any of the keys, we see that we get a key value, a key number.
So enter is thirteen.
Space is 32.
And the one that we want to listen for is escape, which is twenty seven.
So getting those key codes and the key code for escape.
So we want the user to be able to press, escape and then close the model if they press escape and escape
is has a key code of twenty seven.
So now we can try that out and open up our browser, click the modal pop up and I'm going to press a
bunch of keys.
So that's space that's enter.
So we see their key codes being tracked within our console here.
And when I press escape number twenty seven it closes down and you can see also if we open, we can
open it up and close that back down again, using any one of the options that we provide the user to
close the model.
So now try this out for yourself.
And this was a great exercise to try adding different event listeners to different parts of your JavaScript.
So try to add it into your project and close down that model that we opened up in the earlier lesson.