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 Vertically Centered

Add .modal-dialog-centered to .modal-dialog to vertically center the modal.


Modal Sizing

Add .modal-sm or .modal-lg classes to the modal-dialog element to alter the size of the modals.


Modal Animation Effects with animate.css

Add animate.css effects to modals coming in and going out by applying the following attributes to the .modal element: data-modal-animate-in="IN-EFFECT" and data-modal-animate-out="OUT-EFFECT" .

Here are some examples:


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.

Back to main homepage

Back to intro page