The Modal components are useful in situations like, when you need to bring the users attention to some message or a popup.
These are basically dialog boxes/popup windows that are displayed on top of the page.
Creating a Bootstrap Modal
The code below illustrates how modals can be created using Bootstrap
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!-- Button to Open the Modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> Open modal </button> <!-- The Modal --> <div class="modal" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h4 class="modal-title">Modal Heading</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- Modal body --> <div class="modal-body"> Modal body.. </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> </div> </div> </div> </div> |
Add animation in Bootstrap Modal
You can add some animation by using the .fade class
.
This will add a fading effect when the modal is opened or closed.
See the code below:
1 2 | <!-- Fading modal --> <div class="modal fade"></div> |
Bootstrap Modal Size
The size of the modals can be regularized by to contextual classes:
- .modal-sm: Small modals
- .modal-lg: Large modals.
You can add these size classes to the <div>
element with class .modal-dialog
.
See the code below
1 2 | <div class="modal-dialog modal-sm"></div> <div class="modal-dialog modal-lg"></div> |
Default modals size is medium.
Bootstrap Centered Modal
The .modal-dialog-centered
can make the modal vertically and horizontally centred:
1 | <div class="modal-dialog modal-dialog-centered"> |
Bootstrap Modal Classes
Here’s the list of contextual classes for the Bootstrap Modal element:
- .modal: Basic contextual class for creating a Bootstrap modal
- .modal-content: For the modal styling with border, bg-color, header, body
and footer etc. - .modal-dialog-centered: For horizontal and vertically centred modals
- .modal-header: For the modal header
- .modal-body: Styles the body for the modal
- .modal-footer: Styles the footer part for the modal. By default, the footer area is right aligned. However, you can change the
alignement by using the classes justify-content-start and justify-content-center. - .modal-sm: Sizing modal to small
- .modal-lg: Sizing modal to large
- .fade: Adding some animation or transition effect to the modal. It makes the modal fade in and out.
Bootstrap Modal Methods
Below are listed some useful methods for Bootstrap Modal element:
- .modal(options): It can activate the content as a modal. The options that can be used with this method are:
- backdrop: Takes boolean values or the string “static”.
Default value is true. Specifies the overlay (The background screen/page) for the modal. - keyboard: Takes boolean values.
Default value is true. If true, the modal can be closed using the Esc key on the keyboard. - show: Takes boolean values.
Default value is true. If true, the modal is shown when initialized.
- backdrop: Takes boolean values or the string “static”.
- .modal(“toggle”):To toggle the modal
- .modal(“show”): To open the modal
- .modal(“hide”) : To hide the modal
Bootstrap Modal Events
Below is the list of the different events related to the Bootstrap Modal:
- bs.modal: Event of the modal about to be shown
- bs.modal: Event of the modal be fully shown after the CSS transitions have also been completed.
- bs.modal: Event of the modal about to be hidden
- bs.modal: Event of the modal fully hidden after all the transitions have also been completed.