Simplest Toast-style Notification Plugin With jQuery - toastJS

toastJS is a really small, CSS less jQuery plugin used for displaying CSS3 animated, toast-like error/success/loading notification messages on your web app.

How to use it:

1. Include the toastJS plugin's script after jQuery JavaScript library and we're ready to go.

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="toast.js"></script>

2. The JavaScript to create toast messages on the screen that auto dismiss after 2 seconds.

// error toast
showError('Error message','error',true);

// loading toast
showError('Loading message','loading',true);

// success toast
showError('Success message','success',true);

3. Sometimes you might need to disable the auto close functionality.

// error toast
showError('Error message','error',false);

// loading toast
showError('Loading message','loading',false);

// success toast
showError('Success message','success',false);

4. Close the toast messages manually.

hideError()

5. Override the default CSS styles directly in the JavaScript.

addCSSRule(sheet,
  '.success .error_outer',
  'background-color: rgba(128, 187, 80, 0.7);'
);

addCSSRule(sheet,
  '.success .error_inner',
  'background-image: url("http://imgur.com/download/HxkisKF");'
);

addCSSRule(sheet,
  '.success .error_inner, .success .error_right',
  ' background-color: #7EBD4D;'
);

addCSSRule(sheet,
  '.success .error_right:before',
  '  border-right: 7px solid #7EBD4D;'
);

---

This awesome jQuery plugin is developed by arunjayakumar07. For more Advanced Usages, please check the demo page or visit the official website.