Notifications

Notification and custom alerts
Alerts
Refresh Manage Widgets Settings

Examples

Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight required contextual classes (e.g., .alert-success). For inline dismissal, use the alerts jQuery plugin.

Primary Alert

A simple primary alert — check it out!

Primary Alert — Note: There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration.
Success Alert

A simple success alert — check it out!

Success Alert — See more .alert-link examples at Sales ERP By Example.
Warning Alert

A simple warning alert — check it out!

warning alert — It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
Info Alert

A simple Info alert — check it out!

Info alert — There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form
Secondary Alert

A simple Info alert — check it out!

Secondary alert — If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden.
Danger Alert

A simple Info danger — check it out!

Secondary alert — All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this
light Alert

A simple Info light — check it out!

light alert — It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures
Dark Alert

A simple Info dark — check it out!

Dark alert — It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures

Link color

Use the .alert-link utility class to quickly provide matching colored links within any alert.

Primary Alert Link

A simple primary alert link — check it out!

Secondary Alert Link

A simple secondary alert link — check it out!

Success Alert Link

A simple success alert link — check it out!

Danger Alert Link

A simple danger alert link — check it out!

Warning Alert Link

A simple warning alert link — check it out!

Info Alert Link

A simple warning info link — check it out!

Light Alert Link

A simple light info link — check it out!

Dark Alert Link

A simple light dark link — check it out!

Additional content

Alerts can also contain additional HTML elements like headings, paragraphs and dividers.

Dismissing

You can see this in action with a live demo:

Notification Styles Inspiration
Refresh Manage Widgets Settings

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"
}