Displaying a Modal Window

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 containers 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 Com. 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 3:08 label lead by value to register for. 3:13 So first we'll make the callout button, 3:18 a trigger button, by copying the by 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-dialogue div. 4:49 And you can leave your modal wider if you prefer. 4:54