1
00:00:00,090 --> 00:00:05,180
Oh, and welcome in the upcoming section, we are going to be building out a pop up message.

2
00:00:05,460 --> 00:00:11,760
So this is going to be a useful type application where the user can press an element with a specific

3
00:00:11,760 --> 00:00:18,060
class and then we can open up a pop up message in regards to the contents of that element.

4
00:00:18,490 --> 00:00:19,290
Let's try that out.

5
00:00:19,290 --> 00:00:23,390
And first of all, we need to build out our HTML, so let's set that up.

6
00:00:23,820 --> 00:00:27,660
We need to have a container where we've got our output content.

7
00:00:27,910 --> 00:00:30,390
So this is going to be the actual pop up element.

8
00:00:30,540 --> 00:00:33,470
So all the contents in here, this is what we're going to be popping up.

9
00:00:33,840 --> 00:00:37,230
So setting up a button and we're going to need a way to close it.

10
00:00:37,240 --> 00:00:43,590
So adding in a class, we can call this one close and pressing this will close the popup.

11
00:00:43,950 --> 00:00:49,600
And then we also need a message area so we can select that, give it a class of message.

12
00:00:49,620 --> 00:00:54,150
This is where the message content is going to go and we can just put no content yet.

13
00:00:54,360 --> 00:00:56,290
So we've got some default content in there.

14
00:00:56,610 --> 00:01:00,830
Next, we need to set up some elements that are going to actually invoke the pop up.

15
00:01:01,080 --> 00:01:06,150
So setting up a div, give it a class and this could be any class name for this one.

16
00:01:06,150 --> 00:01:08,370
I'm going to have give it a class of pop up.

17
00:01:08,520 --> 00:01:14,010
So any of the elements that have a class of pop up will be able to do the pop up message and then we

18
00:01:14,010 --> 00:01:20,230
need some data in order to output that pop up information so we can just call it data message.

19
00:01:20,490 --> 00:01:21,830
I'll just do this lower case.

20
00:01:21,900 --> 00:01:26,100
This is the attribute that we're going to use that's going to have the message contained.

21
00:01:26,130 --> 00:01:27,800
So the first one can be Hello World.

22
00:01:27,810 --> 00:01:35,730
So the idea here is that you click this element that says click me and you get this hidden message showing

23
00:01:35,730 --> 00:01:37,590
up in the pop and we can refresh it.

24
00:01:37,590 --> 00:01:40,050
And you can see there's not a whole lot happening quite yet.

25
00:01:40,260 --> 00:01:42,450
We've got a close button, doesn't do anything.

26
00:01:42,480 --> 00:01:46,410
We've got no content yet and we've got to click me, which doesn't do anything either.

27
00:01:46,620 --> 00:01:49,400
And we're going to apply all of the functionality with JavaScript.

28
00:01:49,410 --> 00:01:52,680
Of course, let's generate a few more of these, create a few more of these.

29
00:01:52,890 --> 00:01:56,780
So remember, needs to have pop up and it can have a message.

30
00:01:57,420 --> 00:02:00,990
JavaScript is fun and of course it is.

31
00:02:01,380 --> 00:02:04,380
And this one can have the hidden message of JavaScript.

32
00:02:04,410 --> 00:02:10,260
And you could type in whatever content you want and you can utilize these within your website.

33
00:02:10,260 --> 00:02:11,280
Throw it the website.

34
00:02:11,400 --> 00:02:16,290
As long as it has a class of pop up and it's got the JavaScript, it's going to be able to grab that

35
00:02:16,290 --> 00:02:17,010
information.

36
00:02:17,280 --> 00:02:22,470
So now we've got our elements here that are going to have the hidden messages, we've got the clothes,

37
00:02:22,620 --> 00:02:25,620
and we need to do a little bit of styling to make this look better.

38
00:02:25,800 --> 00:02:32,010
And I usually don't try to focus too much time on the styling, as I do want to focus more on the JavaScript.

39
00:02:32,460 --> 00:02:37,980
But in this case, let's do a little bit of styling so that it does stand out and we can see the content

40
00:02:37,980 --> 00:02:38,610
a little bit better.

41
00:02:38,610 --> 00:02:42,900
So font family, we can do this cursive and we've got some border to it.

42
00:02:42,900 --> 00:02:48,840
Text line center Asialink to do the cursor to the pointer so the user knows that these are going to

43
00:02:48,840 --> 00:02:53,400
be clickable and we are going to make them clickable with JavaScript, of course, and then a default

44
00:02:53,400 --> 00:02:55,590
width so we can set this to 200 pics.

45
00:02:55,830 --> 00:02:56,940
So see what that looks like.

46
00:02:56,970 --> 00:03:03,390
So now we've got a few clickable areas and we need to update and create that output area.

47
00:03:03,720 --> 00:03:06,120
So its first style are close button.

48
00:03:06,420 --> 00:03:11,670
So this is that little button in the top hand corner that the user can close so we can position this

49
00:03:11,670 --> 00:03:14,400
absolute so set it up in the top corner.

50
00:03:14,400 --> 00:03:18,450
So maybe 10 picks off the top on the right hand side.

51
00:03:18,460 --> 00:03:20,340
So do ten picks off of the right.

52
00:03:20,670 --> 00:03:23,380
And let's do a background colour for this.

53
00:03:23,570 --> 00:03:27,450
And the font color can be white and the font size.

54
00:03:27,450 --> 00:03:31,020
Let's make it small so it's not very too intrusive.

55
00:03:31,050 --> 00:03:32,730
So a.T.M so suit this looks like.

56
00:03:32,970 --> 00:03:34,280
So we've got a close button.

57
00:03:34,650 --> 00:03:41,190
And lastly, let's also style our output area so that we can move that around the screen so that we

58
00:03:41,190 --> 00:03:42,390
had a class of out.

59
00:03:42,450 --> 00:03:44,760
And so this is just some default styling.

60
00:03:45,000 --> 00:03:46,320
We can have a background color.

61
00:03:46,320 --> 00:03:47,340
So it stands out.

62
00:03:47,340 --> 00:03:52,590
It's different from the regular and wherever we want to position its position, it left twenty five

63
00:03:52,590 --> 00:03:55,830
percent and give it a width of fifty percent.

64
00:03:55,980 --> 00:03:58,650
So that will center that element automatically.

65
00:03:58,800 --> 00:04:02,120
But this is just so that we can distinguish where the element starts and ends.

66
00:04:02,400 --> 00:04:03,030
So there we go.

67
00:04:03,030 --> 00:04:07,530
We've got our content and you can also set default height for this as well.

68
00:04:07,530 --> 00:04:12,090
So if you want to always have a specific height to so it's always at least twenty five percent.

69
00:04:12,450 --> 00:04:19,380
Also, let's add in and update some of the message area text align center and do a different font family

70
00:04:19,470 --> 00:04:22,260
that's got picked some of these default styles and let's try that.

71
00:04:22,290 --> 00:04:23,460
So no content yet.

72
00:04:23,670 --> 00:04:27,900
And we also need to counter that that message at the top.

73
00:04:28,140 --> 00:04:30,270
So adding in a margin at the top.

74
00:04:30,270 --> 00:04:36,750
How but we do twenty picks at the top, so the content is always not underneath the clothes buttons.

75
00:04:36,750 --> 00:04:39,100
We want to try to avoid that as much as possible.

76
00:04:39,100 --> 00:04:44,100
So it looks like we've got our content and we need to have one last thing where we want to be able to

77
00:04:44,100 --> 00:04:45,690
add a class of height.

78
00:04:46,170 --> 00:04:51,840
And what the class of hide is going to do is it's going to basically hide the element that it gets attitude.

79
00:04:52,110 --> 00:04:53,670
So do a display none.

80
00:04:53,790 --> 00:04:59,910
And then by default, now that we've styled our element, our pop up message, we want to hide that.

81
00:04:59,980 --> 00:05:05,860
As well, and we can also actually move it off the top, so if maybe want to do 10 percent off the top,

82
00:05:05,860 --> 00:05:07,600
though, that's not always sitting right at the top.

83
00:05:07,600 --> 00:05:13,390
So there's our our elements and we can add the last class of hide to it.

84
00:05:13,390 --> 00:05:17,920
And that means that with JavaScript, we can even hide it and hide it as needed.

85
00:05:18,130 --> 00:05:20,680
So it's always great to have this option.

86
00:05:20,940 --> 00:05:26,470
I have a class that you can add and remove, and with JavaScript, it's really easy to add and remove

87
00:05:26,470 --> 00:05:26,740
these.

88
00:05:26,890 --> 00:05:29,280
And I'll show you how to do that in the upcoming lessons.

89
00:05:29,620 --> 00:05:36,910
So now set up your basic structure of your elements and we're ready to move on to the next step.

90
00:05:37,150 --> 00:05:39,760
So make sure that you do have some elements.

91
00:05:39,910 --> 00:05:45,340
Give it a class, the same class so you can call it pop up, add in an attribute called data message

92
00:05:45,460 --> 00:05:49,780
so that you've got some type of message information that you can have and that we can output into the

93
00:05:49,780 --> 00:05:54,840
pop up and then also create that pop up area and then apply some styling to make it look good.

94
00:05:55,120 --> 00:05:58,010
So add that in and you're ready to move on to the next step.

95
00:05:58,160 --> 00:06:01,080
We're going to bring the JavaScript and I know that's what you've been waiting for.

96
00:06:01,180 --> 00:06:03,010
So JavaScript is coming up next.