1
00:00:00,330 --> 00:00:07,560
In the earlier lesson, we saw how we can add interaction to our elements, we can also pick up information

2
00:00:07,560 --> 00:00:09,750
from the element that triggered the event.

3
00:00:09,990 --> 00:00:12,050
And we do have one problem now.

4
00:00:12,180 --> 00:00:17,670
We have no way of closing this pop up, but we do have the classes that are already attached.

5
00:00:17,820 --> 00:00:19,620
So we know we can add those in.

6
00:00:19,620 --> 00:00:22,020
And using JavaScript, we're going to make it easy.

7
00:00:22,230 --> 00:00:29,310
We've already selected all of the elements with a class of close and we've put them into object called

8
00:00:29,310 --> 00:00:29,840
close.

9
00:00:30,060 --> 00:00:36,660
So just as we did with the images, we can iterate through all of those elements that have the class

10
00:00:36,660 --> 00:00:37,550
of close.

11
00:00:37,830 --> 00:00:40,550
So using close and the same format.

12
00:00:40,590 --> 00:00:41,700
So for each.

13
00:00:42,760 --> 00:00:48,370
And then as we loop through, we're going to invoke a function, we can use the same format so we can

14
00:00:48,370 --> 00:00:53,150
use elements and then as we loop through, we're going to add an event listener to that.

15
00:00:53,200 --> 00:00:58,960
So adding an event listener and the event listener that we want to add in is a click event.

16
00:00:59,230 --> 00:01:05,280
And then what we want to happen is we want it to close our Molde window.

17
00:01:05,590 --> 00:01:12,180
So just as we saw where we can do remove of the class height, we can add that in.

18
00:01:12,190 --> 00:01:18,760
So it's as easy as that where we add height and that's going to do add a display, none to it, because

19
00:01:18,760 --> 00:01:21,910
within that class we all we have is display none to it.

20
00:01:22,450 --> 00:01:25,710
And before we try it, I just realized that this is misspelled.

21
00:01:25,720 --> 00:01:29,260
So let's spell function properly and now let's try that out.

22
00:01:29,260 --> 00:01:34,810
So we click the image, we get the pop up, we can click in the overlay and that hides it.

23
00:01:35,050 --> 00:01:38,970
We can see the image, we can click on the X and that hides it as well.

24
00:01:39,520 --> 00:01:43,550
So you can see that you've got all of this functionality already to go.

25
00:01:43,870 --> 00:01:50,780
We can also update this now as well, the close span so that we can see it a little bit clearer.

26
00:01:50,950 --> 00:01:55,660
So turning that to wait and also going to add in a background color to this.

27
00:01:56,140 --> 00:01:58,300
So add in a background color of black.

28
00:01:58,540 --> 00:02:03,850
So when we refresh, you can see that this stands out a little bit better and actually probably look

29
00:02:03,850 --> 00:02:06,000
better with a little bit of padding as well.

30
00:02:06,930 --> 00:02:13,230
So we've got our images, we've got a fully functional way to have the images pop up within a window

31
00:02:13,350 --> 00:02:18,750
and then also close them using JavaScript to provide our functionality to go ahead and try this out

32
00:02:18,750 --> 00:02:19,280
for yourself.

33
00:02:19,290 --> 00:02:24,000
And coming up next, we'll do a quick code review and an overview of the code, your lessons.