Bootstrap4 Modal
A modal is a child window that overlays the parent window. Usually, the purpose is to display content from a separate source, allowing some interaction without leaving the parent window. The child window can provide information interaction, etc.
How to create a modal
The following example creates a simple modal effect:
Example
<!--Button: used to open the modal-->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Open modal</button>
<!--Modal-->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!--Modal header-->
<div class="modal-header">
<h4 class="modal-title">Modal header</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!--Modal body-->
<div class="modal-body">Modal content..</div>
<!--Modal footer-->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Try it yourself »
Modal size
We can, by adding the.modal-smclass, create a small modal,.modal-lgclass can create a large modal.
Size classes are placed after the<div>element's.modal-dialogclass:
Other extensions