Bootstrap 4 Modal
Bootstrap 4 modal is a dialog box/popup window that provides either the most important information to the user or taking important information from the user.
Example
Click To See Modal ExampleModals are built with HTML, CSS, and JavaScript. It has mainly three section namely the header, body and footer. Each has its own role and importance.
General Syntax
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalId">Modal Trigger Button</button>
<div class="modal" id="modalId">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"></div>
<div class="modal-body"></div>
<div class="modal-footer"></div>
</div>
</div>
</div>
Source Code
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal_Id">Open modal</button>
<div class="modal" id="modal_Id">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</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">
Save changes
</button>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal_Id">Open modal</button>
<div class="modal" id="modal_Id">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</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">
Save changes
</button>
</div>
</div>
</div>
</div>
Remember:In the above example data attributes data-toggle="modal" & data-target="#modalId" is used inside button.Assign modal id to the button data attribute (data-target).
Boostrap Modal Animation
To create modal animation ,use .fade class to modal container having .modal class.
Source Code
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalId">
Open modal
</button>
<div class="modal fade" tabindex="-1" role="dialog" id="modalId">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</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">Save changes</button>
</div>
</div>
</div>
</div>
Remember:To animate bootstrap modal,assign.modal to the modal container having .modal.
Bootstrap 4 Modal Size
Bootstrap modal size can be controlled by adding .modal-sm for small modal and .modal-lg class for large modal to the <div> that contains .modal-dialog.
General Syntax
<div class="modal-dialog modal-sm"> </div>
<div class="modal-dialog modal-"> </div>
Source Code
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalId">Smaller Model</button>
<div class="modal fade" tabindex="-1" role="dialog" id="modalId">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">�</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</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">Save changes</button>
</div>
</div>
</div>
</div>
<!-- large modal -->
Remember:In the above example,.modal-sm & .modal-lg is assigned to the the <div> having .modal-dialog.
Centered Modal
To create modal vertical as well as horizontally center within the page,use .modal-dialog-centered class to the div that contain class .modal-dialog
Source Code
<div class="bs-example">
<!-- Button HTML (to Trigger Modal) -->
<button type="button" class="btn btn-lg btn-primary show-modal" data-toggle="modal">Show Demo Modal</button>
<!-- Modal HTML -->
<div id="myModal" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Confirmation</h5>
<button type="button" class="close" data-dismiss="modal">�</button>
</div>
<div class="modal-body">
<p>Do you want to save changes to this document before closing?</p>
<p class="text-secondary"><small>If you don't save, your changes will be lost.</small></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
Remember:In the above example,.modal-dialog-centered is assigned to the the
<div> having .modal-dialog.
Web Tutorials
