Modals

Contents

Default modal

Based on original bootstrap modal, this is the preferred method for toggling an in-app modal. If you want to render content in an iFrame, please lean on Fancybox. For confirm modals, it’s fine to use this or noty. These same styles are also used on any Redactor editor modals.

Launch a modal with this code: <a href="#modal-name" data-toggle="modal">Launch modal</a>.

.modal-small smaller, when asking for a single field of data .modal-wide larger width modal if you need something wider .modal-xwide extra wide for conversations modal

<section class="modal in">
  <div class="modal-header">
    <h5>Modal Heading</h5>
  </div><!--modal-header-->
  <div class="modal-body">
    <p>Content goes here ...</p>
  </div><!--/modal-body-->
</section><!--/modal-->

Pill navigation

Keyboard shortcuts modal is a good example of this, content is shown as tabs.

<section class="modal in">
  <div class="modal-header floats">
    <h5>Modal Heading</h5>
    <section id="tabs" class="navbar">
      <ul class="nav nav-tabs">
        <li class="active"><a href="#tabOne" data-toggle="tab">Tab One</a></li>
        <li><a href="#tabTwo" data-toggle="tab">Tab Two</a></li>
        <li><a href="#tabThree" data-toggle="tab">Tab Three</a></li>
      </ul>
    </section><!-- /navbar -->
  </div><!--modal-header-->
  <div class="modal-body">
    <p>Content goes here ...</p>
  </div><!--/modal-body-->
</section><!--/modal-->

Button group

<section class="modal in">
  <div class="modal-header floats">
    <h5>Modal Heading</h5>
    <div class="btn-group">
      <a href="#" class="btn">Button one</a>
      <a href="#" class="btn">Button two</a>
    </div><!--/btn-group-->
  </div><!--modal-header-->
  <div class="modal-body">
    <p>Content goes here ...</p>
  </div><!--/modal-body-->
</section><!--/modal-->

Pager

<section class="modal in">
  <div class="modal-header floats">
    <h5>Modal Heading</h5>
    <section class="pager">
      <a href="#" class="prev" title="Previous"><i class="icon-caret-left"></i></a>
      <a href="#" class="next" title="Next"><i class="icon-caret-right"></i></a>
    </section><!--/pager-->
  </div><!--modal-header-->
  <div class="modal-body">
    <p>Content goes here ...</p>
  </div><!--/modal-body-->
</section><!--/modal-->

<section class="modal in">
  <div class="modal-header floats">
    <h5>Modal Heading</h5>
    <section class="pager">
      <a href="#" class="prev" title="Previous"><i class="icon-arrow-lt"></i></a>
      <a href="#" class="next" title="Next"><i class="icon-arrow-rt"></i></a>
    </section><!--/pager-->
  </div><!--modal-header-->
  <div class="modal-body">
    <section class="alert alert-info">
      <div class="message">
        <p class="solo">Here's a message that's all by itself</p>
      </div><!--/message-->
    </section><!--/alert-->
    <p>Content goes here ...</p>
  </div><!--/modal-body-->
</section><!--/modal-->

Modal footers should only be used when .modal-body has a vertical scrollbar and you want the .form-actions to always be visible. Otherwise it’s not necessary to use the footer.

<section class="modal in">
  <div class="modal-header">
    <h5>Modal Heading</h5>
  </div><!--modal-header-->
  <div class="modal-body">
    <p>Content goes here ...</p>
  </div><!--/modal-body-->
  <div class="modal-footer">
    <button class="btn btn-link danger" data-dismiss="modal">Cancel</button>
    <button class="btn btn-success">Success Button</button>
  </div><!--/modal-footer-->
</section><!--/modal-->

Fancybox

This uses the same styles as other modals, but typically shows a video or content in an iframe. Shown with a 1px border here, but typically would be shown over a modal backdrop.

Launch a fancybox with this code: <a href="#" class="fancyNoTitle width:500 height:200" title="Modal Title">Launch Modal</a>.

<div id="fancybox-wrap">
  <div id="fancybox-outer">
    <div id="fancybox-content">
      <div class="modal-header">
        <h5>Modal Heading</h5>
      </div><!--modal-header-->
      <div class="modal-body">
        <p>Content in a <em>real</em> fancybox will be shown in an iframe here.</p>
      </div><!--/modal-body-->
    </div><!--/fancybox-content-->
    <a id="fancybox-close" style="display: inline;"><i class="icon-close2"></i></a>
  </div><!--/fancybox-outer-->
</div><!--/fancybox-wrap-->