We’re done building the main page, but the site still needs to let users register for

the conference.

Instead of creating and displaying the registration form in a separate HTML page,

we’re going to display it inside a modal window like this.

Modal windows are interactive pop up windows that focus the user on

the content inside the window.

They are a great way to add attention grabbing content to your site like

an important announcement or other important content relevant to your site.

When you visit the modal sections of the docs you'll be presented with

the examples and snippets available for Bootstrap's modal component.

For example, this modal component includes a header,

body, and set of actions in its footer.

You can see an example of how it looks by launching the demo modal below it.

You're so able to use bootstrap grid system within a modal and change and

modal size from small to large.

So back an index.html, all the way at the bottom below the containers

closing div tag, so outside of the container I'm going to add a large

HTML comment flag to indicate where the modal component starts.

So now to quickly add a modal window to the site,

I'll copy the modal snippet from the live demo example here.

I'll paste it into the document and customize the html.

So now I'll change the modal title.

To Register for Full Stack Com.

And we're not going to build the form in this video.

We'll do that in the next section of this course.

For now, I'll add placeholder text inside the modal-body div.

We'll say form goes here.

So even though I've included the modal code snippet in my HTML,

we don't see it in the browser yet.

Well, that's because modal components are initially hidden.

Their display is set to none by default.

To open a modal, you must define a trigger button.

That is a button that when clicked displays the modal.

So our page will have two trigger buttons.

The Register Now button in the jumbotron and

the call out button below the schedule.

In the docs example, I see that to create a trigger button,

you add data toggle and data target attributes to a button's opening tag.

And the data target value needs to match the id given to the modal component.

So back in my HTML I'll change my modal divs id to register.

Now we're going to use this id value in our trigger buttons to target the modal.

While we're here let's also change the aria

label lead by value to register for.

So first we'll make the callout button,

a trigger button, by copying the by data toggle and

data target attributes from the docs example.

And pasting it inside the callout buttons' opening button tag.

Then changing the data-target value to #register,

to match the idea we gave the modal.

I'll go ahead and copy these two attributes, then scroll up and

paste them inside the Jumbotron register button.

So I'll paste those attributes in the opening tag of the register now button.

All right, let's have a look.

I'll refresh the page.

And clicking the two trigger buttons fades the modal in from

the top of the page, great.

And you can close the modal by clicking outside the modal window or

one of the close buttons and icons provided.

And if you want to display a smaller or

larger modal window in your page You can change the size using a modifier class.

For example, adding the class modal-lg in the modal

dialog div makes the modal wider.

Now I personally like the default modal size.

So I'll remove the class modal-lg from my modal-dialogue div.

And you can leave your modal wider if you prefer.