Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Bootstrap Basics

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Displaying a Modal Window

5:02 with Guil Hernandez

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 up

    Related 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 up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up