Elements:Modals
Modals are useful for displaying messages or content to users when they perform a certain action.
Setup
Modals are hidden by default and should be embed in your page using the following markup:
View code example<div class="modal fade">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal title</h4>
<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 content...........</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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->Static Modal Example
Working Modal Example
Modal Sizing
Add
.modal-sm
or
.modal-lg
classes to the
modal-dialog
element to alter the size of the modals.
Dismissing Modals
To allow users to dismiss a modal add a link or button with the attribute
data-dismiss="modal"
within the modal.
Timed Modals
To allow a modal to be opened for a specific duration (in milliseconds) and then have it close itself simply add a
data-modal-duration="DURATION-IN-MILLISECONDS"
attribute to the
.modal
element.