You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

72 lines
1.4 KiB

3 months ago
  1. var bgColors = [
  2. "linear-gradient(to right, #00b09b, #96c93d)",
  3. "linear-gradient(to right, #ff5f6d, #ffc371)",
  4. ],
  5. i = 0;
  6. Toastify({
  7. text: "Hi",
  8. duration: 4500,
  9. destination: "https://github.com/apvarun/toastify-js",
  10. newWindow: true,
  11. gravity: "top",
  12. position: 'left',
  13. }).showToast();
  14. setTimeout(function() {
  15. Toastify({
  16. text: "Simple JavaScript Toasts",
  17. gravity: "top",
  18. position: 'center',
  19. style: {
  20. background: '#0f3443'
  21. }
  22. }).showToast();
  23. }, 1000);
  24. // Options for the toast
  25. var options = {
  26. text: "Happy toasting!",
  27. duration: 2500,
  28. callback: function() {
  29. console.log("Toast hidden");
  30. Toastify.reposition();
  31. },
  32. close: true,
  33. style: {
  34. background: "linear-gradient(to right, #00b09b, #96c93d)",
  35. }
  36. };
  37. // Initializing the toast
  38. var myToast = Toastify(options);
  39. // Toast after delay
  40. setTimeout(function() {
  41. myToast.showToast();
  42. }, 4500);
  43. setTimeout(function() {
  44. Toastify({
  45. text: "Highly customizable",
  46. gravity: "bottom",
  47. position: 'left',
  48. close: true,
  49. style: {
  50. background: "linear-gradient(to right, #ff5f6d, #ffc371)",
  51. }
  52. }).showToast();
  53. }, 3000);
  54. // Displaying toast on manual action `Try`
  55. document.getElementById("new-toast").addEventListener("click", function() {
  56. Toastify({
  57. text: "I am a toast",
  58. duration: 3000,
  59. close: i % 3 ? true : false,
  60. style: {
  61. background: bgColors[i % 2],
  62. }
  63. }).showToast();
  64. i++;
  65. });