@coreui/ajax

<div class="animated fadeIn"> <div class="row"> <div class="col-lg-12"> <div class="card"> <div class="card-header"> <i class="fa fa-align-justify"></i> Bootstrap Modals </div> <div class="card-body">  <button type="button" class="btn btn-secondary" data-toggle="modal" (click)="myModal.show()"> Launch demo modal </button> <button type="button" class="btn btn-secondary" data-toggle="modal" (click)="largeModal.show()"> Launch large modal </button> <button type="button" class="btn btn-secondary" data-toggle="modal" (click)="smallModal.show()"> Launch small modal </button> <hr> <button type="button" class="btn btn-primary" data-toggle="modal" (click)="primaryModal.show()"> Primary modal </button> <button type="button" class="btn btn-success" data-toggle="modal" (click)="successModal.show()"> Success modal </button> <button type="button" class="btn btn-warning" data-toggle="modal" (click)="warningModal.show()"> Warning modal </button> <button type="button" class="btn btn-danger" data-toggle="modal" (click)="dangerModal.show()"> Danger modal </button> <button type="button" class="btn btn-info" data-toggle="modal" (click)="infoModal.show()"> Info modal </button> </div> </div> </div> </div> </div> <div bsModal #myModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Modal title</h4> <button type="button" class="close" (click)="myModal.hide()" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" (click)="myModal.hide()">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <div bsModal #largeModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Modal title</h4> <button type="button" class="close" (click)="largeModal.hide()" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" (click)="largeModal.hide()">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <div bsModal #smallModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog modal-sm" role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Modal title</h4> <button type="button" class="close" (click)="smallModal.hide()" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" (click)="smallModal.hide()">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <div bsModal #primaryModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog modal-primary" role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Modal title</h4> <button type="button" class="close" (click)="primaryModal.hide()" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" (click)="primaryModal.hide()">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <div bsModal #successModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog modal-success" role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Modal title</h4> <button type="button" class="close" (click)="successModal.hide()" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" (click)="successModal.hide()">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <div bsModal #warningModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog modal-warning" role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Modal title</h4> <button type="button" class="close" (click)="warningModal.hide()" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" (click)="warningModal.hide()">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <div bsModal #dangerModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog modal-danger" role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Modal title</h4> <button type="button" class="close" (click)="dangerModal.hide()" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" (click)="dangerModal.hide()">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <div bsModal #infoModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog modal-info" role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Modal title</h4> <button type="button" class="close" (click)="infoModal.hide()" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" (click)="infoModal.hide()">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>