HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
The Modal plugin is a dialog box/popup window that is displayed on top of the current page
The Modal plugin is a dialog box/popup window that is displayed on top of the current page:
Click To Open Modal
Tip: Plugins can be included individually (using Bootstrap's individual "modal.js" file), or all at once (using "bootstrap.js" or "bootstrap.min.js").
The following example shows how to create a basic modal:
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Example Explained
To trigger the modal window, you need to use a button or a link.
Then include the two data-* attributes:
data-toggle="modal"
opens the modal windowdata-target="#myModal"
points to the id of the modalThe parent <div>
of the modal must have an ID that is the
same as the value of the data-target attribute used to trigger the modal ("myModal").
The .modal
class identifies the content of <div>
as a modal and
brings focus to it.
The .fade
class adds a transition effect which fades the modal in
and out. Remove this class if you do not want this effect.
The attribute role="dialog"
improves accessibility for
people using screen readers.
The .modal-dialog
class sets the proper width and margin of the
modal.
The <div>
with class="modal-content
"
styles the modal (border, background-color, etc.). Inside this <div>
,
add
the modal's
header, body, and footer.
The .modal-header
class is used to define the style for the header of the
modal. The <button>
inside the header has a data-dismiss="modal"
attribute which
closes the modal if you click on it. The .close
class styles the close button,
and the .modal-title
class styles the header with a proper line-height.
The .modal-body
class is used to define the style for the body of
the modal. Add any HTML markup here; paragraphs, images, videos, etc.
The .modal-footer
class is used to define the style for the
footer of the modal. Note that this area is right aligned by default.
Change the size of the modal by adding the .modal-sm
class for
small modals or .modal-lg
class for large modals.
Add the size class to the <div>
element with class .modal-dialog
:
<div class="modal-dialog modal-sm">
<div class="modal-dialog modal-lg">
By default, modals are medium in size.
For a complete reference of all modal options, methods and events, go to our Bootstrap JS Modal Reference.