++++ <!– Modal Top Info –> <div id=“frameModalTopInfoDemo”

class="modal fade top"
tabindex="-1"
role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true"
data-keyboard="false"
data-backdrop="static">
<div class="modal-dialog modal-frame modal-top modal-notify modal-info" role="document">
  <!-- Content -->
  <div class="modal-content">
    <!-- Body -->
    <div class="modal-body">
      <div class="row px-4">
        <p class="pt-1 pr-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos..</p>
      </div>
      <div class="row px-4">
        <a type="button" class="btn btn-raised btn-primary mr-2">Yes, please</a>
        <a type="button" class="btn btn-outline-secondary" data-dismiss="modal">No, thanks</a>
      </div>
    </div>
  </div>
  <!-- END Content -->
</div>

</div> <!– END Modal Top Info –>

<!– Side Modal Top Right Success –> <div id=“sideModalTRSuccessDemo”

class="modal fade right"
tabindex="-1"
role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true"
data-keyboard="false"
data-backdrop="static">
<div class="modal-dialog modal-side modal-top-right modal-notify modal-success" role="document">
  <!-- Content -->
  <div class="modal-content">
    <!--Header-->
    <div class="modal-header">
      <p class="lead">Modal Success</p>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <i class="mdi mdi-close mdi-dark mdi-48px"></i>
      </button>
    </div>
    <!-- Body -->
    <div class="modal-body">
      <div class="text-center">
        <i class="mdi mdi-4x mdi-check mdi-rotateIn mb-1"></i>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.
        </p>
      </div>
    </div>
    <!-- Footer -->
    <div class="modal-footer justify-content-center">
      <a type="button" class="btn btn-raised btn-primary mr-2">Yes, please</a>
      <a type="button" class="btn btn-outline-secondary" data-dismiss="modal">No, thanks</a>
    </div>
  </div>
  <!-- END Content -->
</div>

</div> <!– END Side Modal Top Right Success –>

<!– Side Modal Top Left Info –> <div id=“sideModalTLInfoDemo”

class="modal fade left"
tabindex="-1"
role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true"
data-keyboard="false"
data-backdrop="static">
<div class="modal-dialog modal-side modal-top-left modal-notify modal-info" role="document">
  <!-- Content -->
  <div class="modal-content">
    <!--Header-->
    <div class="modal-header">
      <p class="lead">Modal Info</p>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <i class="mdi mdi-close mdi-dark mdi-48px"></i>
      </button>
    </div>
    <!-- Body -->
    <div class="modal-body">
      <img src="/assets/images/modules/attics/admin-dashboard-bootstrap-1280x600.jpg" alt="admin-dashboard-bootstrap" class="img-fluid">
      <div class="text-center">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt vero illo error eveniet cum.</p>
      </div>
    </div>
    <!-- Footer -->
    <div class="modal-footer justify-content-center">
      <a type="button" class="btn btn-raised btn-primary mr-2">Yes, please</a>
      <a type="button" class="btn btn-outline-secondary" data-dismiss="modal">No, thanks</a>
    </div>
  </div>
  <!-- END Content -->
</div>

</div> <!– END Side Modal Top Left Info –>

<!– Modal Bottom Success–> <div id=“frameModalBottomSuccessDemo”

class="modal fade bottom"
tabindex="-1"
role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true"
data-keyboard="false"
data-backdrop="static">
<div class="modal-dialog modal-frame modal-bottom modal-notify modal-success" role="document">
  <!-- Content -->
  <div class="modal-content">
    <!-- Body -->
    <div class="modal-body">
      <p class="mt-1 ml-3 mr-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos..</p><div class="row ml-3">
        <a type="button" class="btn btn-raised btn-primary mr-2">Yes, please</a>
        <a type="button" class="btn btn-outline-secondary" data-dismiss="modal">No, thanks<div class="ripple-container"><div class="ripple-decorator ripple-on ripple-out" style="left: 51.4063px; top: 20px; background-color: rgb(1, 211, 107); transform: scale(14.5548);"></div></div></a>
      </div>
    </div>
  </div>
  <!-- END Content -->
</div>

</div> <!– END Modal Bottom Success –>

<!– Side Modal Bottom Right Danger –> <div id=“sideModalBRDangerDemo”

class="modal fade right"
tabindex="-1"
role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true"
data-keyboard="false"
data-backdrop="static">
<div class="modal-dialog modal-side modal-bottom-right modal-notify modal-danger" role="document">
  <!-- Content -->
  <div class="modal-content">
    <!--Header-->
    <div class="modal-header">
      <p class="lead">Modal Danger</p>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <i class="mdi mdi-close mdi-dark mdi-48px"></i>
      </button>
    </div>
    <!-- Body -->
    <div class="modal-body">
      <div class="row">
        <div class="col-3">
          <p></p>
          <p class="text-center"><i class="mdi mdi-cart fa-4x"></i></p>
        </div>
        <div class="col-9">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, molestiae provident temporibus sunt earum.</p>
          <h2 class="notoc"><span class="badge">v52gs1</span></h2>
        </div>
      </div>
    </div>
    <!-- Footer -->
    <div class="modal-footer justify-content-center">
      <a type="button" class="btn btn-raised btn-primary mr-2">Yes, please</a>
      <a type="button" class="btn btn-outline-secondary" data-dismiss="modal">No, thanks</a>
    </div>
  </div>
  <!-- END Content -->
</div>

</div> <!– END Side Modal Bottom Right Danger –>

<!– Side Modal Bottom Left Warning –> <div id=“sideModalBLWarningDemo”

class="modal fade left"
tabindex="-1"
role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true"
data-keyboard="false"
data-backdrop="static">
<div class="modal-dialog modal-side modal-bottom-left modal-notify modal-warning" role="document">
  <!-- Content -->
  <div class="modal-content">
    <!--Header-->
    <div class="modal-header">
      <p class="lead">Modal Warning</p>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <i class="mdi mdi-close mdi-dark mdi-48px"></i>
      </button>
    </div>
    <!-- Body -->
    <div class="modal-body">
      <div class="row">
        <div class="col-3 text-center">
          <img src="/assets/images/pages/roundtrip/410_bs_modals_extentions/avatar.jpg" alt="avatar.jpg" class="img-fluid z-depth-1-half rounded-circle">
          <div style="height: 10px"></div>
          <p class="title mb-0">Jane</p>
          <p class="text-muted " style="font-size: 13px">Consultant</p>
        </div>
        <div class="col-9">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, molestiae provident temporibus sunt earum.</p>
          <p class="card-text"><strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</strong></p>
        </div>
      </div>
    </div>
    <!-- Footer -->
    <div class="modal-footer justify-content-center">
      <a type="button" class="btn btn-raised btn-primary mr-2">Yes, please</a>
      <a type="button" class="btn btn-outline-secondary" data-dismiss="modal">No, thanks</a>
    </div>
  </div>
  <!-- END Content -->
</div>

</div> <!– END Side Modal Bottom Left Warning –>

<!– Modal Full Height Right Success Demo –> <div id=“fluidModalRightSuccessDemo”

class="modal fade right"
tabindex="-1"
role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true"
data-keyboard="false"
data-backdrop="static">
<div class="modal-dialog modal-full-height modal-right modal-notify modal-success" role="document">
  <!-- Content -->
  <div class="modal-content">
    <!--Header-->
    <div class="modal-header">
      <p class="lead">Modal Success</p>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <i class="mdi mdi-close mdi-dark mdi-48px"></i>
      </button>
    </div>
    <!-- Body -->
    <div class="modal-body">
      <div class="text-center">
        <i class="mdi mdi-4x mdi-check mdi-rotateIn mb-1"></i>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.
        </p>
      </div>
      <ul class="list-group z-depth-0">
        <li class="list-group-item justify-content-between">
          Cras justo odio
          <span class="badge badge-primary badge-pill">14</span>
        </li>
        <li class="list-group-item justify-content-between">
          Dapibus ac facilisis in
          <span class="badge badge-primary badge-pill">2</span>
        </li>
        <li class="list-group-item justify-content-between">
          Morbi leo risus
          <span class="badge badge-primary badge-pill">1</span>
        </li>
        <li class="list-group-item justify-content-between">
          Cras justo odio
          <span class="badge badge-primary badge-pill">14</span>
        </li>
        <li class="list-group-item justify-content-between">
          Dapibus ac facilisis in
          <span class="badge badge-primary badge-pill">2</span>
        </li>
        <li class="list-group-item justify-content-between">
          Morbi leo risus
          <span class="badge badge-primary badge-pill">1</span>
        </li>
      </ul>
    </div>
    <!-- Footer -->
    <div class="modal-footer">
      <a type="button" class="btn btn-raised btn-primary mr-2">Yes, please</a>
      <a type="button" class="btn btn-outline-secondary" data-dismiss="modal">No, thanks</a>
    </div>
  </div>
  <!-- END Content -->
</div>

</div> <!– END Modal Full Height Right Success Demo –>

<!– Modal Full Height Left Info Demo –> <div id=“fluidModalLeftInfoDemo”

class="modal fade left"
tabindex="-1"
role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true"
data-keyboard="false"
data-backdrop="static">
<div class="modal-dialog modal-full-height modal-left modal-notify modal-info" role="document">
  <!-- Content -->
  <div class="modal-content">
    <!--Header-->
    <div class="modal-header">
      <p class="lead">Modal Success</p>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <i class="mdi mdi-close mdi-dark mdi-48px"></i>
      </button>
    </div>
    <!-- Body -->
    <div class="modal-body">
      <div class="text-center">
        <i class="mdi mdi-4x mdi-check mdi-rotateIn mb-1"></i>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.
        </p>
      </div>
      <ul class="list-group z-depth-0">
        <li class="list-group-item justify-content-between">
          Cras justo odio
          <span class="badge badge-primary badge-pill">14</span>
        </li>
        <li class="list-group-item justify-content-between">
          Dapibus ac facilisis in
          <span class="badge badge-primary badge-pill">2</span>
        </li>
        <li class="list-group-item justify-content-between">
          Morbi leo risus
          <span class="badge badge-primary badge-pill">1</span>
        </li>
        <li class="list-group-item justify-content-between">
          Cras justo odio
          <span class="badge badge-primary badge-pill">14</span>
        </li>
        <li class="list-group-item justify-content-between">
          Dapibus ac facilisis in
          <span class="badge badge-primary badge-pill">2</span>
        </li>
        <li class="list-group-item justify-content-between">
          Morbi leo risus
          <span class="badge badge-primary badge-pill">1</span>
        </li>
      </ul>
    </div>
    <!-- Footer -->
    <div class="modal-footer">
      <a type="button" class="btn btn-raised btn-primary mr-2">Yes, please</a>
      <a type="button" class="btn btn-outline-secondary" data-dismiss="modal">No, thanks</a>
    </div>
  </div>
  <!-- END Content -->
</div>

</div> <!– END Modal Full Height Left Info Demo –> ++++