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 & 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>
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>
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>
Huma
Huma is a beautifully crafted user interface for modern Business Admin Web Applications, with examples for many pages needed for Customer Relationship Management, Enterprise Resource Planning, Human Resources, Content Management System, Project Management, Tasks, eCommerce, Messaging and Account Management.