Bootstrap Modal Tutorial
Modal windows can be used to display alert, videos, and images on a website.
The Bootstrap Modal is divided into 3 primary sections:
Each has its own significance and hence should be used properly.
The Default Modal
The default Bootstrap Modal as shown in diagram 1.
To trigger the modal, add a link or a button as shown in codespec 1.
<a href="#" class="btn btn-lg btn-success" data-toggle="modal" data-target="#basicModal">Click to open Modal</a>
The link element has 2 custom data attributes:
- data-toggle – tells Bootstrap what to do
- data-target – tells Bootstrap which element is going to open.
So whenever a link like that is clicked, a modal with an id of “basicModal” will appear.
Now let’s see the code required to define the modal itself as shown in codespec 2:
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> <h3>Modal Body</h3> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>
The parent div of the modal should have the same id as used in the trigger element above.
In our case it would be id=”basicModal”.
NOTE: Custom attributes like aria-labelledby and aria-hidden in the parent modal element are used for accessibility.
In the modal’s HTML, a wrapper <div> nested inside the parent modal div. This <div> has a class of modal-content that tells bootstrap.js where to look for the contents of the modal.
Inside this <div>, we need place the 3 sections as mentioned earlier:
The modal header, as the name implies, is used to give the modal a title and some other elements like the “x” close button. This should have a data-dismiss attribute that tells Bootstrap which element to hide.
In the modal body add any kind of data inside the body, text, form, image(s) and video(s).
In the modal footer place action buttons like “Save“, “Close“, “Accept“, that are associated with the action the modal is displaying.
Once complete you can run the modal in your web page.
We have showed our team as an example for modal windows as shown in diagram 2.
Click on any of the buttons below the team person’s image and a modal window will be displayed as shown in diagram 3.
All work together in perfect harmony to deliver several – unique looking – webpage.
Feel free to do so. If you would like to share your code with others via OpenSourceVarsity please drop us an Email and we’d be happy to put up your code spec for download via our website.
Should you have any queries about the Modal examples code do post these in the Bootstrap 3 section of the Opensourcevarsity forum.
We really do make special efforts to help, having said that, we really cannot re-write/edit code blocks for you.