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">...