Modals are used to provide a pop-up dialog style element that can be used to provide information to the user or even allow the user, to complete a form inside the modal. A Bootstrap modal is essentially made of three parts: a header, body, and footer. You can put any standard HTML markup inside the modal's body element, including standard text or even an embedded YouTube video.
As a general rule, always place the modal's markup in a top-level position inside your view, the top or bottom of the view is the best place to put your modal markup.
In order to show a modal when a button is clicked, you can set the data-toggle and data-target attributes of a Bootstrap button. For example, in the following HTML markup, a button's data-toggle attribute has been set to modal and its data-target attribute has been set to employeeModal:
<div class="row">
<button type="button" class="btn btn-primary btn-lg" data-toggle=
"modal" data-target="#employeeModal">
Show Employee Modal
</button>
</div>
The data-target attribute should contain the ID of the modal <div> element. The <div> element that contains the modal should have a class name of modal:
<div class="modal fade" id="employeeModal" tabindex="-1" role="dialog" aria-labelledby="Employee Information" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss=
"modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Andrew Fuller</h4>
</div>
<div class="modal-body">
<p>
Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of Dallas in 1981.
He is fluent in French and Italian and reads German. He joined the company as a sales representative, was promoted to sales
manager in January 1992 and to vice president of sales in March 1993. Andrew is a member of the Sales Management Roundtable,
the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send Email</button>
</div>
</div>
</div>
</div>
The result of the preceding HTML markup should look similar to the following screenshot:
Bootstrap modals have three standard sizes. If you would like to have a large modal or small modal, add the .modal-lg or .modal-sm class name to the <div> element with the .modal-dialog class as illustrated here:
<div class="modal-dialog modal-lg"> <div class="modal-dialog modal-sm">
By default, modals have a fade-in transition effect when shown on a page. This is accomplished by adding the .fade class name to the <div> element with the .modal class name. Here is an example:
<div class="modal fade" role="dialog" >
If you would like to show the modal instead of fading into the page, simply remove the .fade class name.