1
00:00:00,300 --> 00:00:06,810
This lesson is going to be the model up, pop up, so we are sending a message to the user into a function

2
00:00:06,810 --> 00:00:07,620
called pop up.

3
00:00:07,830 --> 00:00:11,580
So let's add that into our project and have our motile pop up pop up.

4
00:00:11,790 --> 00:00:19,260
And we've already selected under the age object, the motile one object on elements from the screen

5
00:00:19,590 --> 00:00:26,010
so we can apply a style to it and applying a style of display block is going to show it.

6
00:00:26,310 --> 00:00:29,190
So this should actually show the objects.

7
00:00:29,210 --> 00:00:30,300
This will show the object.

8
00:00:30,300 --> 00:00:32,720
When we hit start game, we get test content.

9
00:00:32,880 --> 00:00:35,220
So we also need to fill out some information here.

10
00:00:35,220 --> 00:00:39,540
And of course, our clothes doesn't quite yet work, so we need to take care of that as well.

11
00:00:39,540 --> 00:00:42,290
Within this lesson, we've got our mortal body.

12
00:00:42,300 --> 00:00:49,470
So this is the body of the model one and setting up inner HTML and the inner HTML will be whatever the

13
00:00:49,470 --> 00:00:52,050
message value is that we've sent through.

14
00:00:52,440 --> 00:00:55,280
So we've got select a case, click any of the cases below.

15
00:00:55,290 --> 00:00:58,400
So we've got our instructions popped up and ready to go.

16
00:00:58,650 --> 00:01:04,140
So we need to take care of a few other things and that's in creating that interaction, the ability

17
00:01:04,140 --> 00:01:06,930
to close all of the pop up message.

18
00:01:07,110 --> 00:01:09,900
So this message, we don't necessarily need an action.

19
00:01:10,050 --> 00:01:13,910
We just need to be able to close it from our code.

20
00:01:14,070 --> 00:01:15,970
So let's go down below.

21
00:01:16,410 --> 00:01:19,950
So let's add in the actions for closing the pop up.

22
00:01:20,100 --> 00:01:25,860
And we do have an element here that this one is called the this is close.

23
00:01:25,860 --> 00:01:30,410
So we can select that close object and give the ability to close it.

24
00:01:30,630 --> 00:01:35,700
We don't need to add it into the page object because this is going to be a one off type action and this

25
00:01:35,700 --> 00:01:37,080
is going to be always available.

26
00:01:37,320 --> 00:01:44,520
So available at the document query selector and adding in this event, listener for the closed class

27
00:01:44,700 --> 00:01:48,810
is going to take care of closing that popup window.

28
00:01:48,960 --> 00:01:51,380
So it's going to give the user the option to close it.

29
00:01:51,630 --> 00:01:58,440
So selecting close and we're adding an event listener and the event is going to be listening for a click.

30
00:01:58,560 --> 00:02:02,290
And whenever the click happens, we're going to close the pop up.

31
00:02:02,290 --> 00:02:03,770
We're going to create a new function for that.

32
00:02:03,810 --> 00:02:05,910
So it's going to close the popup window.

33
00:02:06,030 --> 00:02:09,510
And then we also want to add a window object in this window.

34
00:02:09,510 --> 00:02:12,060
Object is going to be on click.

35
00:02:12,060 --> 00:02:17,850
So whenever we click on the window, anywhere within the window, if the event object and we want to

36
00:02:17,850 --> 00:02:22,090
check to make sure if that e target because we're listening on the entire window object.

37
00:02:22,090 --> 00:02:27,450
So we want to make sure that the target is going to be equal to the page model.

38
00:02:27,450 --> 00:02:29,700
And that's the page Motal one element.

39
00:02:30,150 --> 00:02:37,020
So making sure that that got clicked and if it did, then we're going to do the Close Pop-Up function.

40
00:02:37,030 --> 00:02:38,420
So we're going to invoke that function.

41
00:02:38,730 --> 00:02:40,440
So that means that we need to still create that.

42
00:02:40,920 --> 00:02:46,230
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

43
00:02:46,230 --> 00:02:46,650
line.

44
00:02:46,650 --> 00:02:49,050
I'll make it a little bit bigger so it's a little bit more visible.

45
00:02:49,350 --> 00:02:51,000
So creating our function.

46
00:02:51,010 --> 00:02:55,350
So we need a function that's going to close the pop up and we've called to that function a couple times

47
00:02:55,350 --> 00:02:55,830
in the script.

48
00:02:55,830 --> 00:02:58,450
So let's create that function in order to handle that.

49
00:02:58,500 --> 00:03:05,730
So this is going to close the popup window whenever the user either clicks anywhere off the model on

50
00:03:05,730 --> 00:03:12,330
the X, the closed class, selecting the page model one element, and then we're going to play a style

51
00:03:12,330 --> 00:03:15,330
of display, none to that element.

52
00:03:15,360 --> 00:03:22,350
So it's going to hide the pop up window logic that we have to apply here as well, because this is where

53
00:03:22,350 --> 00:03:25,380
potentially we might have another offer that might be made.

54
00:03:25,620 --> 00:03:28,320
So there might be quite a few things that are happening here.

55
00:03:28,560 --> 00:03:35,220
So this is where we have to add offer logic and we're going to have some additional game logic that

56
00:03:35,220 --> 00:03:36,450
we're going to add in this function.

57
00:03:36,630 --> 00:03:40,560
So we're not going to do that quite yet because we just want to make sure that everything is working.

58
00:03:40,560 --> 00:03:45,780
I can close the pop up, I can refresh, I can click anywhere in that closes the pop up.

59
00:03:45,930 --> 00:03:51,600
So we've got the messaging system set up and we need to still add in quite a bit of logic into the game.

60
00:03:51,810 --> 00:03:53,560
So that's still all yet to come.

61
00:03:53,580 --> 00:03:57,200
So go ahead and add in the modal capability into your project.