Create Toast Messages Like Android - toastr.js

toastr.js is a jQuery/JavaScript plugin which lets you show Android app style toast messages on the web application.

Features:

• 6 themes: Android, Moon, Sun, Ocean, Grassland, Rainbow.
• CSS3 based smooth fade and/or slide animations.
• 6 placement variables: topLeft, topCenter, topRight, bottomLeft, bottomCenter, bottomRight.
• Dismisses after a period of time you set.
• Also can be used as a Vanilla JavaScript plugin.

See also:

• 10 Best Toast Notification jQuery/JavaScript Plugins Of 2019

How to use it:

1. Load the stylesheet toastr.css and JavaScript toastr.js in the html file.

<link href="toastr/toastr.css" rel="stylesheet" />
<!-- jQuery is optional -->
<script src="jquery.min.js""></script>
<script src="toastr/toastr.js"></script>

2. Create a new Toastr instance with default options.

var toastr = new Toastr();

3. Display a default toast message on the page.

toastr.show('This is A Basic Toast.');

4. Change the default theme. Possible values: moon, sun, ocean, grassland, rainbow.

var toastr = new Toastr({
    theme: 'moon'
});

5. Change the default position. Possible values: topLeft, topCenter, topRight, bottomLeft, bottomCenter (default), bottomRight.

var toastr = new Toastr({
    position: 'topRight'
});

6. Use the slide animation instead. Default: fade.

var toastr = new Toastr({
    animation: 'slide'
});

7. Set the timeout in milliseconds. Default: 2000.

var toastr = new Toastr({
    timeout: 5000
});

8. Make the toast message always be visible.

var toastr = new Toastr({
    autohide: false
});

9. Dismiss the toast message manually.

var toastr = new Toastr({
    toastr.hide();
});

Changelog:

2021-09-05

• Update

---

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