WEBVTT

00:00:07.200 --> 00:00:12.470
It this video we're going to learn how to create models using bootstrap.

00:00:12.840 --> 00:00:19.110
So you got to create a model like this one we're going to have a button and when we click on the button

00:00:19.140 --> 00:00:21.990
we can see the model appearing on the screen.

00:00:22.380 --> 00:00:25.450
So let's go ahead and create something similar.

00:00:25.500 --> 00:00:30.730
So first of all this creates our pattern.

00:00:32.430 --> 00:00:40.620
This place some checks in the button and let's give the person a type of button and also the sign of

00:00:40.620 --> 00:00:48.570
the button using the button class and the button primary class.

00:00:48.570 --> 00:00:55.370
All right OK so now let's create the model itself.

00:00:55.410 --> 00:01:05.110
So first of all we need to place everything inside a model which is a div of glose model.

00:01:06.180 --> 00:01:06.520
OK

00:01:10.410 --> 00:01:20.580
and undergirds we're going to have another day of class model dialogue.

00:01:23.200 --> 00:01:23.900
OK.

00:01:24.270 --> 00:01:27.820
And this will wrap the contents

00:01:32.060 --> 00:01:38.700
of that inside the model contents we're going to have the different components of the mold starting

00:01:38.700 --> 00:01:44.010
with the head of the model or the body of the model and then the footer of the model.

00:01:44.010 --> 00:01:53.520
So first let's have the header which is going to be a bit of a close model head.

00:01:54.190 --> 00:02:04.870
And similarly the body is going to be a div of cloth model body.

00:02:04.950 --> 00:02:11.000
And finally after a day of class model.

00:02:11.630 --> 00:02:13.140
OK.

00:02:14.070 --> 00:02:27.350
All right so let's add an ID to our model so you can give us an ID my inquiry.

00:02:29.240 --> 00:02:29.890
OK

00:02:34.680 --> 00:02:38.970
we can add some more attributes

00:02:42.000 --> 00:02:42.750
mainly for

00:02:45.690 --> 00:02:48.470
assistive technologies like screen readers.

00:02:48.660 --> 00:02:55.730
So for example we can add a roll of dialogue.

00:02:56.760 --> 00:03:06.840
Basically this is going to be used mainly when the screen reader notices that the mold becomes visible

00:03:08.490 --> 00:03:10.820
with this dialog grow.

00:03:11.030 --> 00:03:16.760
It'll speak the the label for these specific elements.

00:03:17.420 --> 00:03:18.660
OK.

00:03:19.450 --> 00:03:20.390
OK.

00:03:20.580 --> 00:03:28.730
We can add another attributes area labeled boy.

00:03:29.880 --> 00:03:30.330
So

00:03:33.090 --> 00:03:37.190
this attributes will reference the model title.

00:03:37.230 --> 00:03:46.930
So we get to choose a value later and usually we would link this to the model header.

00:03:46.950 --> 00:03:54.210
So we're going to have a header inside the header and we're going to link the area labeled by to the

00:03:54.240 --> 00:03:55.140
header.

00:03:55.520 --> 00:03:55.800
OK.

00:03:55.800 --> 00:03:59.010
Using the ID of the header later on.

00:03:59.040 --> 00:04:02.190
OK so we can do that later on.

00:04:02.190 --> 00:04:03.780
And also we can add another attributes.

00:04:03.810 --> 00:04:12.180
It's going to be area hidden and we can set that to true.

00:04:12.320 --> 00:04:13.170
OK.

00:04:13.410 --> 00:04:24.130
So this will tell assistive technologies to skip the DOM elements of the of the model.

00:04:24.930 --> 00:04:30.930
So now it's related the contents of our model content model content.

00:04:31.200 --> 00:04:35.470
So let's have a look.

00:04:35.580 --> 00:04:42.880
So first of all let's have a close button so we can have a button.

00:04:44.100 --> 00:04:45.180
OK.

00:04:45.960 --> 00:04:53.070
We need to use an entity for this.

00:04:53.730 --> 00:04:55.230
So it's going to be

00:05:03.990 --> 00:05:05.760
it's going to be this one claims

00:05:08.930 --> 00:05:14.600
at the moment we can't see the model.

00:05:14.960 --> 00:05:17.740
OK OK OK.

00:05:18.770 --> 00:05:23.950
OK let's create the puzzle functionally so that we can see the model as we are populating the content

00:05:23.940 --> 00:05:24.400
.

00:05:24.470 --> 00:05:34.470
So to build the functionality will need to go back to the button and add some data attributes.

00:05:34.610 --> 00:05:35.420
OK.

00:05:36.050 --> 00:05:44.940
So the first data attributes is going to be the data targets.

00:05:48.030 --> 00:05:49.380
OK.

00:05:50.000 --> 00:05:54.830
So our target is going to be the model itself so we need the ID of the model.

00:05:55.190 --> 00:06:00.750
So the data target is going to be the elements of ID my inquiry.

00:06:01.120 --> 00:06:01.910
OK.

00:06:02.360 --> 00:06:06.520
And also you need a data.

00:06:08.480 --> 00:06:13.810
And in our case is going to be model.

00:06:13.870 --> 00:06:19.220
All right so now if we click on the button so we can see them all appearing.

00:06:19.250 --> 00:06:27.060
The only thing we can see at the moment is the button that we just created this button.

00:06:28.480 --> 00:06:30.160
OK.

00:06:30.980 --> 00:06:36.900
So let's let's give it a glass.

00:06:37.120 --> 00:06:44.090
So we need a class of clothes for this person is a close cousin because he already

00:06:47.250 --> 00:06:52.330
moved to the top right of the model.

00:06:53.850 --> 00:07:02.500
And also we're going to have another attribute so it's going to be a data attributes which is going

00:07:02.500 --> 00:07:13.370
to be data dismiss and we will say that to model and what he's doing.

00:07:13.940 --> 00:07:23.330
So by writing this we sit in the button to close all the model dialogues on the page.

00:07:23.420 --> 00:07:36.470
So if we click on a button with this data set to model it'll close all the mold dialogs on that page

00:07:36.490 --> 00:07:36.520
.

00:07:36.520 --> 00:07:37.900
OK.

00:07:38.870 --> 00:07:39.290
All right

00:07:39.290 --> 00:07:47.450
.

00:07:47.450 --> 00:07:49.950
OK.

00:07:52.190 --> 00:07:57.440
Now let's create our header.

00:07:58.100 --> 00:08:02.160
So it's good fun H for

00:08:05.320 --> 00:08:18.170
SUVs and techs the thank you for contacting us as we have said earlier.

00:08:18.480 --> 00:08:22.530
OK let's give the head an ID.

00:08:24.200 --> 00:08:25.800
OK.

00:08:26.420 --> 00:08:34.970
For example let's go for my model label and let's use this ID

00:08:38.650 --> 00:08:43.770
for the area labeled by attributes for the model.

00:08:44.200 --> 00:08:44.910
OK.

00:08:44.920 --> 00:08:55.820
So as we have said earlier we linking this area labeled by to the ID of the of the head

00:08:59.600 --> 00:09:02.100
of the head of that we have inside the mall head.

00:09:02.210 --> 00:09:03.250
All right.

00:09:03.250 --> 00:09:12.090
So we're using here and the simple elements to label this is Steve assistive technologies.

00:09:12.110 --> 00:09:13.280
OK.

00:09:13.270 --> 00:09:14.920
All right.

00:09:15.010 --> 00:09:18.550
I know you've got our clothes plus in our head.

00:09:18.860 --> 00:09:19.130
OK.

00:09:19.140 --> 00:09:26.040
Now let's move to the body content or the model body.

00:09:26.620 --> 00:09:28.890
OK.

00:09:28.900 --> 00:09:33.920
So we're going to have a sex area.

00:09:35.680 --> 00:09:38.700
OK.

00:09:41.880 --> 00:09:47.340
It's giving a class of control.

00:09:48.220 --> 00:09:55.400
And let's hit the number of rows to five rows.

00:09:58.580 --> 00:10:04.490
And also this gives an ID inquiry for example.

00:10:05.550 --> 00:10:12.060
OK let's give you a label as well.

00:10:12.880 --> 00:10:17.240
You'll call any

00:10:20.380 --> 00:10:24.040
label for Inquiry

00:10:33.560 --> 00:10:38.310
OK now we can move to the mall food.

00:10:38.770 --> 00:10:41.700
So we've got a couple of buttons there.

00:10:42.180 --> 00:10:43.120
It's them quickly.

00:10:43.120 --> 00:10:58.590
So first one he's going to be close and second one send K in it's style these and so the first one is

00:10:58.610 --> 00:11:01.270
give his face a type of button.

00:11:01.720 --> 00:11:10.240
And also his style is using the bus and gloves and also the button default class.

00:11:10.700 --> 00:11:17.960
We're going to use a data attributes for this person so similarly to the boson.

00:11:18.010 --> 00:11:22.220
So we want this person to close all the model dialogues on the page.

00:11:22.340 --> 00:11:24.730
So we're going to give him a data dismiss

00:11:28.960 --> 00:11:31.960
so we can say two more.

00:11:32.900 --> 00:11:36.400
OK.

00:11:37.880 --> 00:11:40.410
So moving to the next button.

00:11:40.420 --> 00:11:43.860
So type of person as well.

00:11:44.260 --> 00:11:53.350
And let's just sign it's using the button and Button primary class.

00:11:55.260 --> 00:11:55.950
OK.

00:11:56.470 --> 00:11:58.810
So we finish building our model.

00:12:01.440 --> 00:12:02.440
All right

00:12:06.200 --> 00:12:14.280
now we're going to move to something else we will see how to use some model javascript's events.

00:12:14.940 --> 00:12:17.500
OK.

00:12:19.360 --> 00:12:26.830
So we're going to see for example how to trigger an action when the model is shown or when the mole

00:12:26.830 --> 00:12:28.130
is hidden.

00:12:28.150 --> 00:12:30.920
OK so let's try a few examples.

00:12:30.940 --> 00:12:39.610
So first we need to have a script so make sure that your script goes after the bootstrap javascript's

00:12:39.660 --> 00:12:40.510
.

00:12:41.520 --> 00:12:48.600
OK so let's have a script just before the end of the body element.

00:12:49.030 --> 00:12:49.540
So

00:12:53.590 --> 00:13:04.530
OK so let's let's write some code that will set an alert message when the model is hidden.

00:13:04.940 --> 00:13:16.320
OK so we get to access the model using its ID my inquiry.

00:13:17.500 --> 00:13:22.960
OK then we're going to use a method on so this method takes a couple of parameters.

00:13:22.960 --> 00:13:29.320
So the first parameter is going to be the event and the second one is going to be the function to executes

00:13:31.360 --> 00:13:32.430
for that event.

00:13:32.890 --> 00:13:35.660
So the event is going to be.

00:13:35.740 --> 00:13:37.990
So we want the model to be shown.

00:13:38.320 --> 00:13:45.910
So you know in this case the event is going to be shown be

00:13:50.890 --> 00:13:55.350
shown Don't be as thoughts.

00:13:56.100 --> 00:14:05.620
Ok then let's write a function that will send a message so function no barometer

00:14:08.680 --> 00:14:13.210
and it sends its message when the towards alerts

00:14:15.970 --> 00:14:16.630
for example

00:14:18.650 --> 00:14:21.970
.

00:14:25.940 --> 00:14:27.470
So you see

00:14:35.660 --> 00:14:38.310
it save first.

00:14:38.740 --> 00:14:42.670
OK let's try and refresh the page.

00:14:42.670 --> 00:14:43.160
OK.

00:14:43.450 --> 00:14:48.810
Now you can see that's once the model is shown we can what we can see the alerts message.

00:14:48.820 --> 00:14:58.210
OK so there are other events you can use you can use the show events rather than shown what the difference

00:14:58.270 --> 00:15:03.060
is that the action is going to be triggered this time.

00:15:03.280 --> 00:15:09.570
Once the show instance method is called.

00:15:09.640 --> 00:15:16.570
OK so if we try this time and refresh the page you try once we click on the button we can see the alerts

00:15:16.570 --> 00:15:18.950
message even before the model shows.

00:15:19.180 --> 00:15:19.810
OK.

00:15:20.080 --> 00:15:24.690
And similarly we can use other events like Heda.

00:15:25.000 --> 00:15:25.590
OK.

00:15:25.780 --> 00:15:26.960
So these events.

00:15:27.600 --> 00:15:34.380
So the action this time is going to be triggered once the model is completely hidden.

00:15:34.910 --> 00:15:36.780
OK but if you use height

00:15:39.610 --> 00:15:51.850
what's going to happen is that once you click on the close button ok which we'll call the hide instance

00:15:52.890 --> 00:15:59.330
Elizabeth it shows up and then after that the model disappears.

00:15:59.380 --> 00:16:01.230
OK.

00:16:01.270 --> 00:16:04.160
All right so it's comments. That's for now