1
00:00:01,080 --> 00:00:05,260
In this section, we're going to be looking at another component using JavaScript.

2
00:00:05,280 --> 00:00:06,680
So this is a model pop up.

3
00:00:06,870 --> 00:00:12,790
So these are handy where you can have these debates that are going to show up on and different events.

4
00:00:12,810 --> 00:00:17,960
So usually a click event is going to produce a div and you can have various content inside of that div

5
00:00:18,030 --> 00:00:18,600
element.

6
00:00:18,690 --> 00:00:21,810
And what it does is it mutes the rest of the screen.

7
00:00:21,810 --> 00:00:22,680
So graze it out.

8
00:00:22,860 --> 00:00:28,500
So only that pop up div is going to be that or pop up element is the one that's going to be visible

9
00:00:28,750 --> 00:00:32,320
and then you can close these and have messages in those as well.

10
00:00:32,340 --> 00:00:39,150
So let's try that so we have a button to start our model pop up and this button can be positioned anywhere

11
00:00:39,180 --> 00:00:40,940
within your website.

12
00:00:40,950 --> 00:00:45,300
And then we've got title mean content and of course you can style this as needed.

13
00:00:45,450 --> 00:00:50,160
Make it look a whole lot more interesting as soon as you click anywhere off of the model within the

14
00:00:50,160 --> 00:00:50,910
gray area.

15
00:00:50,940 --> 00:00:53,630
It's going to close it or you can close it with the close button.

16
00:00:53,940 --> 00:01:00,330
So the objective here is to get more familiar with working with JavaScript and different elements and

17
00:01:00,330 --> 00:01:04,920
styling those elements, hiding, showing elements as needed, depending on the that.