Up next in 10
Mastering Bootstrap Modals Complete Guide with HTML & JavaScript for Stunning Popups & Dialogs
Jan 9, 2025
Mastering Bootstrap Modals Complete Guide with HTML & JavaScript for Stunning Popups & Dialogs
Show More Show Less View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video we'll looking at uh
0:04
another open source library for showing
0:07
alert boxes so this time we'll be
0:09
looking at bootstrap Library bootstrap
0:12
also offers models that you can show on
0:15
the screen for receiving at different
0:18
positions so this is actually a basic
0:21
model in bootstrap where you can have a
0:23
simple title and a text and set of
0:26
buttons so this is for closing the model
0:29
box this is for
0:31
these are two buttons right here you can
0:33
just show these model boxes for various
0:35
situations let's suppose the user
0:37
performing some operation then you want
0:39
to show this alert box so do you want to
0:42
continue so this will be close or
0:45
continue so we also have this cross
0:48
Button as well so the user can close
0:50
this by out clicking outside this also
0:54
then we have the vertically centered
0:55
model so this appears right in the
0:58
center position of the screen
0:59
horizontally and vertically but the
1:03
content is the same we have the title we
1:05
have the actual message and then we have
1:07
a set of
1:08
buttons so the first one appears on the
1:12
top top of the screen and the second one
1:14
is aligning vertically centered this is
1:16
our second type the third type is the
1:19
scrollable text so if you have a bunch
1:21
of text that you want to show on the
1:23
model box this is will be very helpful
1:26
if you have a
1:28
agreement that you you want to show set
1:31
of so if your
1:33
application has a set of agreements that
1:37
you want to show to the
1:38
user then a bunch of text then you can
1:41
show it inside this scrollable model
1:44
window again we have these two buttons
1:46
out there we have the title and then we
1:48
have a bunch of
1:50
text so the last but not least we have
1:53
the static back drop model so the
1:56
advantage of using is that the user
1:58
can't click this model window by
2:00
clicking outside this model they want to
2:03
click the
2:04
buttons to close this in the basic one
2:08
if you click outside the model window
2:10
you can close this but now in the static
2:12
backdrop if the user clicks outside the
2:15
model window they can't close the model
2:18
they need to click the button if you
2:20
want to close it so I will show you step
2:23
by step on how to get started with
2:25
bootstrap
2:26
models I will show you one by one
2:30
so first of all what you need to
2:33
do in the browser just create a simple
2:36
index.html file and
2:39
uh you just need to include the
2:41
bootstrap CSS and the bootstrap
2:45
JavaScript so I've already included this
2:47
you will see that the CDN
2:49
links if you want to get this you can go
2:52
to bootstrap official website or simply
2:55
write bootstrap CDN and w3schools.com
2:59
you will simply get uh all the CDN which
3:02
is
3:05
required so you will get all the cdan
3:08
links bootstrap and bootstrap window so
3:11
simply include this and now I will
3:13
simply get started on writing the markup
3:17
for showing
3:18
the basic model in bootstrap so you need
3:23
to understand model com uh
3:27
constitutes let me first of all show you
3:31
how to trigger the model so we will have
3:33
a simple button we will give it a
3:36
bootstrap class so BTM BTM
3:40
primary and then
3:43
the label of this button will be basic
3:46
model
3:47
so if you see in the browser we will
3:50
have a simple button basic
3:52
model so now to align this in the center
3:55
position we'll use the container class
3:57
of bootstrap margin top five
4:02
so I will just shift this button in this
4:05
container class so it will have some
4:07
margin automatically and has2 tag as
4:10
well say
4:12
bootstrap model
4:18
example so you will see now we have
4:21
margin added automatically using the
4:24
container class of
4:26
bootstrap so when you click this button
4:29
B basic model we need to show
4:32
the model window so now for showing this
4:37
we need to add this attribute which is
4:40
data do BS BS for bootstrap and tole t
4:46
oou g l e and here you need to specify
4:50
the
4:53
ID that you want to show the alert
4:58
window this will be constant value this
5:01
needs to be model because we need to
5:02
show the model window and the second
5:06
attribute custom attribute that you need
5:09
to is specify here data. bs. Target so
5:14
here you need to specify the ID that you
5:17
will give to your model window so in
5:20
this way we are basic
5:22
model so now we need to Define this
5:26
model
5:27
window so we need to give the same ID
5:30
that we have given right here which is
5:32
basic model in this
5:34
attribute so now we need to Define
5:38
this just after this button right at the
5:42
bottom you can Define it inside a div
5:44
tag you need to give the ID same ID
5:47
basic
5:51
model and in bootstrap we every model
5:55
window will have this class Base Class
5:57
of model
6:00
so inside this we will
6:03
Define the M model dialogue so bootstrap
6:07
have this class here model dialogue this
6:09
is a base
6:10
class this is the model dialogue is
6:14
the if you want to
6:17
specify the dialogue and then inside
6:20
this we have the model content
6:23
class and inside this we have the model
6:26
header class
6:29
so just see all these classes this is a
6:32
base class model inside this we have
6:34
model dialogue model content model
6:39
header and now inside this we can
6:42
specify the title so the title will have
6:45
this class of model
6:48
title and we can give it a title to the
6:51
model which is basic
6:54
model so if you just click the button
6:58
you will see this
7:00
there is this model window appearing and
7:02
the title that we have given basic model
7:06
and now to show other properties
7:09
here if you want to show the cross icon
7:12
if you want to close it we will have
7:14
this
7:16
button button type button
7:21
and now to show this cross icon we need
7:25
to use the bootstrap class here which is
7:27
BTN close
7:32
so now you will see this cross icon will
7:34
be
7:35
added this is used to close the model
7:37
icon but if I click this nothing happens
7:40
for this we do need to add a
7:45
attribute which is data BS
7:49
dismiss and this I need to set it to
7:53
model so if you now set this and click
7:57
on this you will see the if you click
7:59
this
8:00
icon the model will
8:03
close so this is all happening because
8:06
of this custom attribute that bootstrap
8:09
provides you data BS
8:13
dismiss
8:16
so this is because of this custom
8:19
attribute that we have
8:22
added and after
8:25
this this only is the model header if
8:28
you see just divide this into sections
8:32
this is actually the header of the model
8:33
which contains the title and the cross
8:35
button the second section is actually
8:38
the body which is
8:41
model body
8:43
class and here you specify
8:47
the
8:49
actual body of the model so we are
8:52
specifying the simple message so if you
8:54
now click you will see this is the
8:56
actual message which is shown to the
8:58
user so this is specified uh this is you
9:02
will see this horizontal line
9:04
automatically added by bootstrap Just
9:07
differentiating Between the header and
9:09
the
9:11
body uh then after this model body we
9:15
will have another diff and this section
9:17
is the footer section of the model so we
9:21
have this class which is provided by
9:24
bootstrap which is model footer so
9:27
inside this you will specify all your
9:29
buttons that you want to show in the
9:35
model so here you will specify the
9:38
bootstrap class of button BTN BTN
9:44
secondary and this one for closing it
9:47
again for closing we will specify that
9:49
attribute D data
9:51
BS
9:54
dismiss we need to set it to model so
9:57
now we also have this button as as well
10:00
close
10:01
button if you click it then also it
10:03
closes if you click this icon then also
10:05
it
10:06
closes the second button is
10:13
for you can specify as many buttons as
10:16
you want but you'll only be showing two
10:18
buttons so this button will be
10:21
responsible for saving the changes so
10:24
this can be
10:26
anything this can be
10:28
delete update anything but I'm am just
10:31
taking an example save changes so
10:33
according to your application you can
10:35
specify this button and nothing happens
10:38
if I click this but you get the
10:43
basic model or bootstrap I've shown you
10:46
all the three sections first is the
10:47
header section which contains the title
10:50
and this icon then we have the actual
10:52
body and then we have the footer section
10:54
with these which contains these two
10:56
buttons so for every model that you
10:58
create in bootstrap this will be the
11:02
structure that you will
11:05
follow we will have these three sections
11:07
model header body
11:09
footer and now on top of that we will
11:13
show you if you want to add a custom
11:16
animation because if I now click this it
11:19
is just showing it without this
11:21
animation but if you want to show a
11:23
fading animation you can just add this
11:26
class just in the after this model which
11:29
is fade
11:30
class just add this class now if you see
11:34
the output you will see a nice little
11:37
animation at the starting when the model
11:41
appears on the screen so this is
11:43
actually added by this class that we
11:46
added so you can check out the bootstrap
11:49
docs it contains a lot of animations so
11:52
you can add
11:54
those the second type of model that I
11:57
want to show you
11:59
is the vertically centered model if you
12:02
want to Center this model in the center
12:05
of the screen both horizontally and
12:06
vertically for that we do have a class
12:10
which we can add so I will simply copy
12:12
everything from
12:17
here and uh paste it so this will
12:24
be vertically and horizontally centered
12:36
all the things remain the same but
12:38
here we do need to add this
12:41
class after this model dialogue model
12:47
dialogue
12:49
centered if you want to Center this you
12:52
will add this class which is provided by
12:54
bootstrap and now if you click the
12:57
second button
13:00
uh let me specify the second button
13:02
which
13:08
is which is the
13:12
centered wood and we need to give this
13:17
ID
13:19
centered so we need to give the same ID
13:22
that we specify here so
13:29
so you will now see now the model will
13:32
appear right in the center of the screen
13:34
both horizontally and
13:38
vertically so most of the times you will
13:40
use this type because uh most of the
13:44
dialogue boxes that you see in the
13:45
applications appear in the center of the
13:47
screen so you will just need to add this
13:51
class here model dialog centered the
13:54
third type is actually the
13:57
scrolling model so if you want to scroll
14:00
something if you have a lot of
14:03
text then in that
14:06
case I will just change the ID here
14:09
which is scrollable
14:13
model and I will have this third button
14:40
so now we have the third button uh I
14:42
just want to change
14:47
here so here you just need to paste uh a
14:51
lot more text and the class will also
14:55
change from model dialogue Center
14:58
to model dialogue
15:03
scrollable so this is again a class
15:05
provided by bootstrap model dialog
15:08
scrollable so right here you will paste
15:11
a bunch of
15:13
text let me paste it
15:29
so inside the model body here will paste
15:32
all this text so if I now click this you
15:35
will see a bunch of text and a scroll
15:37
bar is automatically added whenever you
15:41
scroll so in this way this is a third
15:44
type which is scrollable if you want to
15:47
scroll something a bunch of text you can
15:50
use this
15:52
model and the fourth one is
15:56
actually if you want to prevent the user
15:59
from clicking the outside and closing
16:02
this model you can use
16:05
this let me paste it
16:13
here so for this we have specifically
16:16
added these two attributes which are
16:18
provided
16:19
by bootstrap which is data BS backdrop
16:24
and we have set this value to static
16:27
this means that the user can't click
16:29
outside the model window to close
16:32
it and the second attribute is datab BS
16:35
keyboard
16:37
false so this means that the user can't
16:39
also click any key on the keyboard to
16:41
actually close the model these two
16:45
attributes that we have
16:55
added so now if you click outside the
16:58
model window the model will not close
17:00
you need to specifically click the
17:01
buttons to close it this is a fourth
17:04
type these are the basic four types of
17:07
models which are