Elegant Toast Notification Library For jQuery - Notify
| File Size: | 21.9 KB |
|---|---|
| Views Total: | 2458 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Notify is a small jQuery notification plugin used to create Material Toast like notification messages sliding in/out from the edge of your screen.
Key features:
- success, info, error, warn notification types.
- Auto dismisses after a timeout, with a countdown bar.
- LTR and RTL support.
- Open/close callbacks.
- Customize the position of the notification.
How to use it:
1. Link to jQuery library and the Notify plugin's files as follows:
<link href="dist/jquery.notify.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous">
</script>
<script src="dist/jquery.notify.js"></script>
2. Create a default toast notification on the webpage. This toast notification will auto dismiss after 4 seconds.
$.notify();
3. All possible options which let you create your own toast notifications.
$.notify({
// where to append the toast notification
wrapper: 'body',
// toast message
message: 'Your request submitted successfuly!',
// success, info, error, warn
type: 'success',
// 1: top-left, 2: top-center, 3: top-right
// 4: mid-left, 5: mid-right
// 6: bottom-left, 7: bottom-center, 8: bottom-right
position: 1,
// or 'rtl'
dir: 'ltr',
// enable/disable auto close
autoClose: true,
// timeout in milliseconds
duration: 4000
});
4. Perform actions when the toast notification opens/closes.
$.notify({
onOpen: null, // function
onClose: null // function
});
This awesome jQuery plugin is developed by digitalify. For more Advanced Usages, please check the demo page or visit the official website.











