Skip to content

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">&times;</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.

Also see modals onload.

Awesome Features

99.9% Uptime / Free Upgrades / Fully Responsive / Bug Free
Theme Colours

Green Red Blue Purple Pink Orange Lime Blue-dark Red-dark Brown Cyan-dark Yellow Slate Olive Teal Green-bright

Cookies are NOT enabled so colour selection is not persistent.