BS Modal
The Modal Plugin
The Modal plugin is a dialog box/popup window that appears on top of the current page.
Tip: Plugins can be included individually (via Bootstrap’s “modal.js” file) or all at once (“bootstrap.js” or “bootstrap.min.js”).
How To Create a Modal
The following example demonstrates how to create a basic modal.
Example
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Example explained
The “Trigger” part:
To open the modal window, use a button or a link.
Then, add the two data-* attributes:
- data-toggle=”modal” brings up the modal window.
- data-target=”#myModal” refers to the id of the modal
The “Modal” part:
The parent <div> of the modal should have the same ID as the value of the data-target property used to activate it (“myModal”).
The .modal class marks the content of <div> as a modal and highlights it.
The .fade class creates a transition effect that fades the modal in and out. If you want to avoid this effect, remove this class.
The role=”dialog” attribute makes content more accessible to screen reader users.
The .modal-dialog class specifies the width and margin of the modal.
The “Modal content” part:
The <div> with class=”modal-content” styles the modal (e.g., border, background color). Include the header, body, and footer of the modal within this <div>.
The .modal-header class defines the style for the modal’s header. The <button> inside the header has a data-dismiss=”modal” attribute, which dismisses the modal when clicked. The .close class styles the close button, while the .modal-title class styles the header with the appropriate line-height.
The .modal-body class defines the style for the modal’s body. Add any HTML markup here, including paragraphs, photos, and videos.
The .modal-footer class defines the style of the modal’s footer. By default, this region is right aligned.
Modal Size
To change the size of the modal, use the .modal-sm class for tiny modals or .modal-lg for large modals.
Add the size class to the <div> element with the class .modal-dialog.
Small Modal
<div class="modal-dialog modal-sm">
Large Modal
<div class="modal-dialog modal-lg">
By default, modals are medium size.
