Modal

Modals use default Bootstrap modal. For more information about it, please read documentation here:

Bootstrap Modals Documentation

Basic Markup

Hereis a basic html of modal:

<div class="panel">
    <div class="panel-content">
        <h1><strong>Simple</strong> Portlets</h1>
        <p>Example of panel with no header and footer.</p>
    </div>
</div>

Modal Styles

We have added new styles that you can create simply by adding a class to your modal.

Slide Left / Right Modal

Just add modal-slideleft or modal-slideright class to your modal to create it:

<div class="modal fade modal-slideleft" id="modal-slideleft" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <div class="row">
          <div class="col-md-12">
            <h2 class="c-primary m-b-30">Are you sure you want to proceed?</h2>
            <button type="button" class="btn btn-primary btn-embossed btn-block" data-dismiss="modal">Yes, I'm sure</button>
            <button type="button" data-dismiss="modal" class="btn btn-white btn-block">Oops, I prefer not!</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Slide Top / Bottom Modal

Just add modal-bottomfull or modal-topfull class to your modal to create it:

<div class="modal fade" id="modal-topfull" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-topfull">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="icons-office-52"></i></button>
        <h4 class="modal-title"><strong>Top Fullwidth</strong> modal</h4>
      </div>
      <div class="modal-body">
        My content...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default btn-embossed" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary btn-embossed" data-dismiss="modal">Save changes</button>
      </div>
    </div>
  </div>
</div>

Image Modal

If you just want to display an image in a modal window, you can use bootstap modal and add modal-image class.

You can add a title to your image. Title will be display at the bottom of image with shadow style.

 <div class="modal fade modal-image" id="modal-image" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="icons-office-52"></i></button>
      </div>
      <div class="modal-body">
        <img src="assets/images/gallery/transport3.jpg" alt="picture 1" class="img-responsive">
      </div>
      <div class="modal-footer">
        <p class="font-nothing f-20">Title of your image</p>
      </div>
    </div>
  </div>
</div>