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