blur-admin/src/app/pages/modals/modals.html

<div class="widgets">

  <div class="row">
    <div class="col-md-12"
         ba-panel
         ba-panel-title="Modals"
         ba-panel-class="with-scroll">
      <div ng-include="'app/pages/modals/modalsPanel.html'"></div>
    </div>
  </div>

  <div class="row">
    <div class="col-md-6"
         ba-panel
         ba-panel-title="Message Modals"
         ba-panel-class="with-scroll">
      <div ng-include="'app/pages/modals/message-modals.html'"></div>
    </div>
    <div class="col-md-6"
         ba-panel
         ba-panel-title="Notifications"
         ba-panel-class="with-scroll">
      <div ng-include="'app/pages/modals/notifications/notifications.html'"></div>
    </div>
  </div>

</div>


<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <em class="ion-ios-close-empty sn-link-close"></em>
        </button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
        dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
        suscipit lobortis nisl ut aliquip ex ea commodo consequat.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
      </div>
    </div>
  </div>
</div>

<!-- Large modal -->
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <em class="ion-ios-close-empty sn-link-close"></em>
        </button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
        dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
        suscipit lobortis nisl ut aliquip ex ea commodo consequat.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
      </div>
    </div>
  </div>
</div>

<!-- Small modal -->
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <em class="ion-ios-close-empty sn-link-close"></em>
        </button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
        dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
        suscipit lobortis nisl ut aliquip ex ea commodo consequat.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
      </div>
    </div>
  </div>
</div>

<!-- Success modal -->
<div class="modal fade message-modal success-modal" id="successModal" tabindex="-1" role="dialog"
     aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <i class="ion-checkmark"></i>
      </div>
      <div class="modal-title">Success</div>
      <div class="modal-body">Your information has been saved successfully</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-success" data-dismiss="modal">OK</button>
      </div>
    </div>
  </div>
</div>

<!-- Info modal -->
<div class="modal fade message-modal info-modal" id="infoModal" tabindex="-1" role="dialog"
     aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <i class="ion-information"></i>
      </div>
      <div class="modal-title">Information</div>
      <div class="modal-body">You've got a new email!</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-info" data-dismiss="modal">OK</button>
      </div>
    </div>
  </div>
</div>

<!-- Warning modal -->
<div class="modal fade message-modal warning-modal" id="warningModal" tabindex="-1" role="dialog"
     aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <i class="ion-android-warning"></i>
      </div>
      <div class="modal-title">Warning</div>
      <div class="modal-body">Your computer is about to explode!</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-warning" data-dismiss="modal">OK</button>
      </div>
    </div>
  </div>
</div>

<!-- Danger modal -->
<div class="modal fade message-modal danger-modal" id="dangerModal" tabindex="-1" role="dialog"
     aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <i class="ion-flame"></i>
      </div>
      <div class="modal-title">Error</div>
      <div class="modal-body">Your information hasn't been saved!</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">OK</button>
      </div>
    </div>
  </div>
</div>