1
00:00:00,570 --> 00:00:03,990
In this lesson we'll be creating a bootstrap model.

2
00:00:03,990 --> 00:00:09,540
A model is a dialog box that pops up on top of the current page.

3
00:00:09,630 --> 00:00:14,430
The model can contain an alert or any other type of content.

4
00:00:14,430 --> 00:00:16,910
This example illustrates how a model works.

5
00:00:18,730 --> 00:00:26,910
When we click the launch button we can see the model appears with a section for a header and some content.

6
00:00:26,930 --> 00:00:34,380
Another feature is that it fades out the content behind the model to exit the model.

7
00:00:34,380 --> 00:00:38,370
We can click anywhere outside the model or press the close button

8
00:00:44,130 --> 00:00:52,350
to create a model restart by making a button the button must have a data toggle attribute set to model

9
00:00:53,310 --> 00:01:00,150
it must also have a data target attribute that points to the idea of the modal div which will create

10
00:01:00,180 --> 00:01:01,920
in just a second.

11
00:01:01,920 --> 00:01:05,340
We'll be calling this model div Model 1

12
00:01:09,040 --> 00:01:18,960
Now go ahead and make a divide and set the class to model and feed set the set the modal I.D. to the

13
00:01:18,960 --> 00:01:21,800
same value as in the data target attribute.

14
00:01:23,020 --> 00:01:30,670
So if you recall we just named the data target attribute Model 1 so set the idea to model 1 and these

15
00:01:30,670 --> 00:01:32,040
values are case sensitive.

16
00:01:32,050 --> 00:01:33,860
So make sure it's an exact match.

17
00:01:34,760 --> 00:01:43,130
The model class identifies the content of a div as a model the feed class adds a phase transition effect

18
00:01:43,370 --> 00:01:46,070
when the model is launched and closed.

19
00:01:46,130 --> 00:01:49,900
You can see that when we open it it fades in and fades out.

20
00:01:54,960 --> 00:02:03,580
Next we create another div and set the class to modal dialog the modal dialog class sets the proper

21
00:02:03,580 --> 00:02:09,130
width in margin of the modal.

22
00:02:09,260 --> 00:02:16,630
Now we create another div with the class set to modal content this class styles the modal including

23
00:02:16,660 --> 00:02:18,580
the border in background color.

24
00:02:21,350 --> 00:02:25,650
Inside this div we create a div with the class set to modal header.

25
00:02:25,820 --> 00:02:28,700
This styles the header of our model.

26
00:02:28,710 --> 00:02:37,900
Next we have a button element with a class set to close and data dismiss attribute set to modal this

27
00:02:37,900 --> 00:02:46,140
button syntax is for the X at the top left court at the top right corner of the model located here the

28
00:02:46,140 --> 00:02:54,760
closed class styles the closed button the data dismiss attribute closes the modal we then have our header

29
00:02:54,760 --> 00:03:00,520
inside the H inside an H for element with the class set to modal title

30
00:03:03,260 --> 00:03:06,220
the modal title class styles the header content

31
00:03:09,990 --> 00:03:14,430
next we have a div with the class set to modal body.

32
00:03:14,430 --> 00:03:17,680
This class styles the body content of the model.

33
00:03:17,880 --> 00:03:23,040
So what you see displayed here.

34
00:03:23,080 --> 00:03:30,340
Lastly we have a div with the class set to modal footer the modal footer class styles the footer content

35
00:03:30,430 --> 00:03:32,560
of the modal.

36
00:03:32,770 --> 00:03:44,950
We've also included a standard button in the footer with a data dismiss attribute and this again will

37
00:03:44,950 --> 00:03:46,360
close the button when clicked

38
00:03:49,290 --> 00:03:50,610
and so that's all there is to it.

39
00:03:50,610 --> 00:03:58,000
Once you finish typing in your code you just save your file and refresh your browser and your model

40
00:03:58,000 --> 00:03:58,620
should work.