++++ <!– 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 –> ++++