Notifications
Notification and custom alertsNotification Styles Inspiration
Notification Styles Inspiration Simple ideas & effects for website notifications
| Examples | Action |
|---|---|
| .... Notification Styles "Scale".... | |
| Jelly | |
| Slide in | |
| Genie | |
| Flip | |
| Bouncy Flip |
| Examples | Action |
|---|---|
| Slide On Top | |
| Expanding Loader | |
| Corner Expand | |
| Loading Circle | |
| Box Spinner | |
| Thumb Slider |
Sweet Alert
A beautiful replacement for JavaScript's "Alert"
| Examples | Action |
|---|---|
| A basic message | |
swal("Here's a message!", "It's pretty, isn't it?") |
|
| A success message! | |
swal("Good job!", "You clicked the button!", "success") |
|
| A warning message, with a function attached to the "Confirm"-button | |
swal({ title: "Are you sure?", text: "You will not be able to recover this imaginary file!", type: "warning", showCancelButton: true, confirmButtonColor: "#DD6B55", confirmButtonText: "Yes, delete it!", closeOnConfirm: false }, function(){ swal("Deleted!", "Your imaginary file has been deleted.", "success"); }); |
|
| ... and by passing a parameter, you can execute something else for "Cancel". | |
swal({ title: "Are you sure?", text: "You will not be able to recover this imaginary file!", type: "warning", showCancelButton: true, confirmButtonColor: "#DD6B55", confirmButtonText: "Yes, delete it!", cancelButtonText: "No, cancel plx!", closeOnConfirm: false, closeOnCancel: false }, function(isConfirm){ if (isConfirm) { swal("Deleted!", "Your imaginary file has been deleted.", "success"); } else { swal("Cancelled", "Your imaginary file is safe :)", "error"); } }); |
|
| A message with a custom icon | |
swal({ title: "Sweet!", text: "Here's a custom image.", imageUrl: "images/thumbs-up.jpg" }); |
|
Toastr
toastr is a Javascript library for Gnome / Growl type non-blocking notifications. jQuery is required. The goal is to create a simple core library that can be customized and extended.
| Examples | Action |
|---|---|
| Toastr example with info | |
| Toastr example with success | |
| Toastr example with warning | |
| Toastr example with danger |
Command: toastr["success"]("Example message ", "Example title")
toastr.options = {
"closeButton": true,
"debug": false,
"newestOnTop": false,
"progressBar": false,
"positionClass": "toast-top-center",
"preventDuplicates": false,
"onclick": null,
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
}