In this installment of our Bootstrap 3 tutorial, we build a modal. Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.
Video Transcript
Hey everybody this is Christopher Gimmer from BootstrapBay and welcome to the seventh installment of our Bootstrap 3 tutorial. Today we’re going to be covering modals which are basically pop-up boxes.
To give you a preview of what we’re going to be doing today, if you click on our contact button our modal pops up and brings it to the foreground while greying out the rest of the site. Then we can close that off and we’re back to the main page. So that’s what we’re going to be building today and let’s dive right in.
First thing we’re going to do is go back to our header code. We’re going to locate our contact button, but you can create a modal with any button you want. Beside our hash tag, we’re going to write ‘contact’ and this is going to be our reference for JavaScript and jQuery. Then we’re going to add data-toggle equal to modal. This is going to trigger the modal functionality.
Now we want to scroll down to the end of our website. We want to make sure that we put the jQuery code at the bottom of the page so that it loads faster. HTML loads from top to bottom so this ensures a more efficient loading process. When people land on your page, it usually takes them a few seconds to digest everything on the page before they go clicking around everywhere.
Now we’re going to div class equal to modal and we need to specify a navigation so we’ll just go with fade. We’ll link up to the JavaScript documentation and you can check out the other options that are available. Then we set the ID equal to contact which has to match the reference up top. Then, role equal to dialog.
Next we’re going to div class equal to modal-dialog and then div class equal to modal-content. This is basically the structure for the modal, and then we can start building it out.
Now we’re going to start on the header with div class equal to modal-header. Inside here we’ll go with an h4 tag and name it contact. If we go to our preview and we click on contact, we have our modal appearing styled with the header. Right now we don’t have our close button created yet so to dismiss just click outside of the modal to bring you back.
Next we’re going to create the body. Within our model-content class, we’re going to create another class called modal-body. In here we’ll add a paragraph tag and we’ll say for general inquiries please email [email protected]. Now when we go back to our preview, you can see there’s a header with a body and it’s all styled properly.
The last thing we’re going to do is add our footer with a button. Still within our modal-content, we’re going to create another class, as you might have guessed, modal-footer. The naming does make sense. Here we’re going to create our close button. Just like any other button, we’ll go a class equal to ‘btn btn-primary’ then we’ll go data-dismiss equal to modal. This is basically going to trigger the dismiss function for the modal and we’ll name the button ‘close’.
Now when we go back to our preview, click on contact and we have our modal all completed. We have our header, text within our body, then we have our footer and our close button. If we click on that, it dismisses the modal properly.
So that’s pretty much it for our tutorial on modals. Obviously you can get quite intricate and build a form or anything you really want in here and customize it any way you like. In the next video, we’re going to add thumbnails to our theme content just to make the page a little nicer. Make sure to subscribe, comment and we’ll see you in the next video.
