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 documentationfor 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.