Sweet Alert

Sweet Alert automatically centers itself on the page and looks great no matter if you're using a desktop computer, mobile or tablet. It's even highly customizable, as you can see below. Please read the official plugin documentation for a full list of options.

<button 

                                      class="btn btn-primary" 

                                      data-toggle="swal" 

                                      data-swal-title="Here's a message!">

                                      Basic

                                    </button>

<button 

                                      class="btn btn-primary" 

                                      data-toggle="swal" 

                                      data-swal-title="Here's a message!"

                                      data-swal-text="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam tenetur unde odio nam reiciendis cum maiores dicta vel officiis aliquid nesciunt enim incidunt ab qui, at quis beatae illum, error.">

                                      Title &amp; Subtitle

                                    </button>

<button 

                                      class="btn btn-success" 

                                      data-toggle="swal" 

                                      data-swal-title="Good job!"

                                      data-swal-text="You clicked the button!"

                                      data-swal-type="success">

                                      Success

                                    </button>

Confirm

A warning message, with a function attached to the confirm button.

<button 

                                      class="btn btn-warning" 

                                      data-toggle="swal" 

                                      data-swal-title="Are you sure?"

                                      data-swal-text="You will not be able to recover this imaginary file!"

                                      data-swal-type="warning"

                                      data-swal-show-cancel-button="true"

                                      data-swal-confirm-button-text="Yes, delete it!"

                                      data-swal-confirm-cb="#swal-confirm-delete"

                                      data-swal-close-on-confirm="false">

                                      Confirm

                                    </button>

                                    

                                    <div 

                                      id="swal-confirm-delete" 

                                      class="d-none"

                                      data-swal-type="success"

                                      data-swal-title="Deleted!"

                                      data-swal-text="Your imaginary file has been deleted.">

                                    </div>

Confirm and Cancel

And by passing a parameter, you can execute something else for Cancel.

<button 

                                      class="btn btn-danger" 

                                      data-toggle="swal" 

                                      data-swal-title="Are you sure?"

                                      data-swal-text="You will not be able to recover this imaginary file!"

                                      data-swal-type="warning"

                                      data-swal-confirm-button-text="Yes, delete it!"

                                      data-swal-confirm-cb="#swal-confirm-delete"

                                      data-swal-show-cancel-button="true"

                                      data-swal-cancel-button-text="No, cancel please!"

                                      data-swal-cancel-cb="#swal-cancel-delete"

                                      data-swal-close-on-confirm="false"

                                      data-swal-close-on-cancel="false">

                                      Confirm and Cancel

                                    </button>

                                    

                                    <div 

                                      id="swal-cancel-delete" 

                                      class="d-none"

                                      data-swal-type="error"

                                      data-swal-title="Cancelled"

                                      data-swal-text="Your imaginary file is safe :)">

                                    </div>