1
00:00:01,700 --> 00:00:06,170
OK, in this video, I want to talk about pop up box, so you click a button, a little box pops up,

2
00:00:06,410 --> 00:00:10,790
gives you a little message, maybe there's some things you can click and have a box.

3
00:00:10,790 --> 00:00:17,060
So you see these a lot of Web pages with JavaScript, you know, boxes pop up or sometimes ads will

4
00:00:17,060 --> 00:00:20,930
pop up and a pop up box kind of annoying and it happens on one page.

5
00:00:20,930 --> 00:00:25,490
But if you're creating a program, there's all kinds of times when you might want to flash up a box

6
00:00:26,600 --> 00:00:28,970
to give a warning to say, hey, are you sure?

7
00:00:29,510 --> 00:00:35,080
You know, do you really want to proceed or, hey, don't click that or whatever you want to do.

8
00:00:35,300 --> 00:00:37,050
So that's we're going to look at in this video.

9
00:00:37,050 --> 00:00:41,120
It's probably going to take a couple of videos, because as you can see here, there are a bunch of

10
00:00:41,120 --> 00:00:43,760
different types of pop up boxes that you can do.

11
00:00:43,760 --> 00:00:47,420
So in this video, I'll just run through them very quickly.

12
00:00:47,420 --> 00:00:49,700
In the next video, I'll show you how to use each of them.

13
00:00:50,090 --> 00:00:58,700
So let's start by just creating a button on this call this pop button, and it's a button and it would

14
00:00:58,700 --> 00:00:59,450
send route.

15
00:00:59,450 --> 00:01:02,510
And we want the text to equal.

16
00:01:06,480 --> 00:01:07,500
To pop.

17
00:01:09,030 --> 00:01:10,890
Up, I don't know.

18
00:01:13,110 --> 00:01:19,560
And we want this to have a command of pop up, call it anything you want, and let's just.

19
00:01:20,970 --> 00:01:27,390
Oh, pop, underscore, button pack, and let's give this opportunity of 20 just to push it down a little

20
00:01:27,390 --> 00:01:27,630
bit.

21
00:01:27,900 --> 00:01:35,490
OK, so now we need to create this pop up function and let's just come up here and create pop up and

22
00:01:35,490 --> 00:01:39,300
probably has two peas in it, pop whatever pop up function.

23
00:01:39,990 --> 00:01:42,570
And so we want to define pop up.

24
00:01:44,160 --> 00:01:45,450
And now what do we want to do?

25
00:01:45,480 --> 00:01:50,490
Well, this is a message box widget.

26
00:01:52,020 --> 00:01:56,980
And then we want to call one of these things right?

27
00:01:57,170 --> 00:01:58,890
So let's start with show info.

28
00:01:59,940 --> 00:02:05,370
So message box that show info and this is a function and we want to pass in the title.

29
00:02:05,520 --> 00:02:09,060
So let's say pop up title.

30
00:02:09,540 --> 00:02:16,890
And then we also want to pass on the message that shows up in the actual pop up box itself, so to say.

31
00:02:17,130 --> 00:02:20,730
Look at my pop up message.

32
00:02:21,510 --> 00:02:26,430
Now this is a message box and this doesn't actually it comes with Quinter.

33
00:02:26,580 --> 00:02:31,690
It's already installed, but we have to still import it, which is a little weird, but no big deal.

34
00:02:31,720 --> 00:02:33,140
You could just do that from the top here.

35
00:02:33,150 --> 00:02:39,530
So from teh Kintyre import message box.

36
00:02:39,810 --> 00:02:42,240
Now, earlier we imported everything.

37
00:02:42,250 --> 00:02:43,860
This is just a weird thing and counter.

38
00:02:44,100 --> 00:02:50,220
We still have to explicitly import certain things from time to time and this message box is one of them.

39
00:02:50,460 --> 00:02:54,780
So, OK, let's go ahead and save this and just run this, see what we have.

40
00:02:57,120 --> 00:03:01,410
So here we see clicked a pop up boom, here's our pop up title.

41
00:03:02,450 --> 00:03:07,220
And if we click here, you can see the icon that we have here also shows up here, it's dark.

42
00:03:07,220 --> 00:03:11,500
It's kind of hard to see if I click over here, you can kind of see it right.

43
00:03:11,720 --> 00:03:18,860
And we just look at my pop up message and it has this eye because if we close this and see.

44
00:03:20,910 --> 00:03:25,770
We are doing a show info, show info, I am right.

45
00:03:26,040 --> 00:03:27,390
So that's what that means.

46
00:03:27,510 --> 00:03:33,030
Now we can do things based on whether or not that thing popped up and we'll look at that in the next

47
00:03:33,030 --> 00:03:33,300
video.

48
00:03:33,300 --> 00:03:36,200
But for now, I just want to run through all of these real quick.

49
00:03:36,210 --> 00:03:39,180
So instead of show info, let's go show warning.

50
00:03:39,490 --> 00:03:41,550
So if we save this and run it.

51
00:03:44,440 --> 00:03:52,060
Now we get this sort of construction looking triangle and, you know, this is a warning, apparently,

52
00:03:52,300 --> 00:03:53,460
exclamation mark.

53
00:03:53,740 --> 00:03:55,000
OK, that's that one.

54
00:03:57,200 --> 00:03:59,110
And let's go show Aira now.

55
00:04:01,140 --> 00:04:05,190
And some of these are different, some of these are subtly different, some of these are a lot different.

56
00:04:06,300 --> 00:04:09,480
And we'll talk about why you might want to use one versus another later.

57
00:04:09,810 --> 00:04:11,490
Here we get this big red angry ex.

58
00:04:11,550 --> 00:04:12,870
Look at my pop up message.

59
00:04:13,350 --> 00:04:13,760
Right.

60
00:04:15,410 --> 00:04:21,230
And that was show error, so exs error, I guess I hear we have asked question, this is a little bit

61
00:04:21,230 --> 00:04:21,640
different.

62
00:04:21,710 --> 00:04:24,920
So let's pop this one in there, save it and run it.

63
00:04:28,250 --> 00:04:33,760
And now we see how pop tidal look at my pop up message, yes or no, so you can ask a question here.

64
00:04:33,800 --> 00:04:35,000
Would you like to proceed?

65
00:04:35,210 --> 00:04:35,830
Yes.

66
00:04:35,840 --> 00:04:36,940
Would you like to proceed?

67
00:04:36,980 --> 00:04:37,490
No.

68
00:04:37,700 --> 00:04:40,310
Based on what you click, something will happen now.

69
00:04:40,310 --> 00:04:43,190
Nothing happens here because we haven't programmed in that functionality.

70
00:04:43,190 --> 00:04:44,810
And we'll look at how to do that in the next video.

71
00:04:44,820 --> 00:04:48,830
But like I said in this video, I just really quickly want to show all of these to you.

72
00:04:49,370 --> 00:04:51,170
So, OK, ask question.

73
00:04:51,170 --> 00:04:51,530
Ask.

74
00:04:51,530 --> 00:04:52,460
OK, Hansell.

75
00:04:52,460 --> 00:04:58,280
This one's slightly different, slightly variation, a slight variation on the asking thing.

76
00:04:59,260 --> 00:05:04,960
So we have cooked the pop up look at my pop up now this is OK, cancel the last one was yes.

77
00:05:04,990 --> 00:05:06,400
No, this is OK.

78
00:05:06,400 --> 00:05:10,840
Cancel, you know, a subtle difference, but a difference nonetheless.

79
00:05:11,260 --> 00:05:19,900
And ask, OK, cancel and then oh this was asked question ask yes or no is similar to ask question but

80
00:05:19,960 --> 00:05:22,300
let's just run it and see to make sure.

81
00:05:24,930 --> 00:05:31,080
Look to pop up, look at my public question, yes, no, and I suspect the differences in the output

82
00:05:31,380 --> 00:05:33,270
or maybe this question mark looks different.

83
00:05:33,280 --> 00:05:34,080
I can't remember.

84
00:05:34,590 --> 00:05:36,150
You can rewind and watch and see.

85
00:05:36,390 --> 00:05:41,610
So those are pop up boxes and those are the different ones you have to choose from and you'll choose

86
00:05:41,610 --> 00:05:43,740
based on what you want to do in the next video.

87
00:05:43,740 --> 00:05:50,040
We'll look at these in more detail and we'll look at how to sort of deal with whether a person clicked

88
00:05:50,040 --> 00:05:54,930
yes or no or OK or cancel or whatever, and then do things based on that.

89
00:05:55,110 --> 00:05:56,340
And that'll be in the next video.