Make Admin Template Documentation

## 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>