Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Modal windows are interactive pop-up windows that focus the user on the content inside the window; they're a great way to add attention-grabbing content to your site.
Comment snippet
<!--=====================================
FORM MODAL
=====================================-->
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
We’re done building the main page, but the
site still needs to let users register for
0:00
the conference.
0:04
Instead of creating and displaying the
registration form in a separate HTML page,
0:05
we’re going to display it inside
a modal window like this.
0:11
Modal windows are interactive pop
up windows that focus the user on
0:15
the content inside the window.
0:20
They are a great way to add attention
grabbing content to your site like
0:22
an important announcement or other
important content relevant to your site.
0:26
When you visit the modal sections of
the docs you'll be presented with
0:31
the examples and snippets available for
Bootstrap's modal component.
0:35
For example,
this modal component includes a header,
0:39
body, and set of actions in its footer.
0:43
You can see an example of how it looks
by launching the demo modal below it.
0:46
You're so able to use bootstrap grid
system within a modal and change and
0:51
modal size from small to large.
0:56
So back an index.html, all the way
at the bottom below the container's
0:58
closing div tag, so outside of
the container I'm going to add a large
1:03
HTML comment flag to indicate
where the modal component starts.
1:09
So now to quickly add
a modal window to the site,
1:17
I'll copy the modal snippet from
the live demo example here.
1:22
I'll paste it into the document and
customize the html.
1:29
So now I'll change the modal title.
1:37
To Register for Full Stack Conf.
1:43
And we're not going to build
the form in this video.
1:50
We'll do that in the next
section of this course.
1:52
For now, I'll add placeholder
text inside the modal-body div.
1:55
We'll say form goes here.
2:01
So even though I've included
the modal code snippet in my HTML,
2:07
we don't see it in the browser yet.
2:11
Well, that's because modal
components are initially hidden.
2:14
Their display is set to none by default.
2:18
To open a modal,
you must define a trigger button.
2:21
That is a button that when
clicked displays the modal.
2:24
So our page will have two trigger buttons.
2:29
The Register Now button
in the jumbotron and
2:32
the call out button below the schedule.
2:35
In the docs example,
I see that to create a trigger button,
2:39
you add data toggle and data target
attributes to a button's opening tag.
2:43
And the data target value needs to match
the id given to the modal component.
2:49
So back in my HTML I'll change
my modal divs id to register.
2:57
Now we're going to use this id value in
our trigger buttons to target the modal.
3:03
While we're here let's
also change the aria-labelled
3:08
by value to register form.
3:13
So first we'll make the callout button,
3:18
a trigger button,
by copying the button data toggle and
3:22
data target attributes
from the docs example.
3:27
And pasting it inside the callout
buttons' opening button tag.
3:32
Then changing the data-target
value to #register,
3:39
to match the idea we gave the modal.
3:44
I'll go ahead and copy these two
attributes, then scroll up and
3:48
paste them inside
the Jumbotron register button.
3:53
So I'll paste those attributes in the
opening tag of the register now button.
3:57
All right, let's have a look.
4:05
I'll refresh the page.
4:08
And clicking the two trigger
buttons fades the modal in from
4:10
the top of the page, great.
4:15
And you can close the modal by
clicking outside the modal window or
4:17
one of the close buttons and
icons provided.
4:22
And if you want to display a smaller or
4:26
larger modal window in your page, you can
change the size using a modifier class.
4:28
For example,
adding the class modal-lg in the modal
4:34
dialog div makes the modal wider.
4:39
Now I personally like
the default modal size.
4:45
So I'll remove the class modal-lg
from my modal-dialog div.
4:49
And you can leave your
modal wider if you prefer.
4:54
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up