In the earlier lesson, we saw how we can add interaction to our elements, we can also pick up information
from the element that triggered the event.
And we do have one problem now.
We have no way of closing this pop up, but we do have the classes that are already attached.
So we know we can add those in.
And using JavaScript, we're going to make it easy.
We've already selected all of the elements with a class of close and we've put them into object called
close.
So just as we did with the images, we can iterate through all of those elements that have the class
of close.
So using close and the same format.
So for each.
And then as we loop through, we're going to invoke a function, we can use the same format so we can
use elements and then as we loop through, we're going to add an event listener to that.
So adding an event listener and the event listener that we want to add in is a click event.
And then what we want to happen is we want it to close our Molde window.
So just as we saw where we can do remove of the class height, we can add that in.
So it's as easy as that where we add height and that's going to do add a display, none to it, because
within that class we all we have is display none to it.
And before we try it, I just realized that this is misspelled.
So let's spell function properly and now let's try that out.
So we click the image, we get the pop up, we can click in the overlay and that hides it.
We can see the image, we can click on the X and that hides it as well.
So you can see that you've got all of this functionality already to go.
We can also update this now as well, the close span so that we can see it a little bit clearer.
So turning that to wait and also going to add in a background color to this.
So add in a background color of black.
So when we refresh, you can see that this stands out a little bit better and actually probably look
better with a little bit of padding as well.
So we've got our images, we've got a fully functional way to have the images pop up within a window
and then also close them using JavaScript to provide our functionality to go ahead and try this out
for yourself.
And coming up next, we'll do a quick code review and an overview of the code, your lessons.