Toastify JS- 好用的 javascript 訊息提示功能

Toastify JS 是一個輕巧的可以用來做網頁訊息提示功能(toast)的套件，只要簡單套用就能讓你在頁面上顯示你想要給使用者的訊息。

可以使用 npm 安裝

npm install --save toastify-js

或是透過 cdn

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>

接著參考文件設定你要的內容跟樣子就好了。

Toastify({
  text: "This is a toast",
  duration: 3000,
  destination: "https://github.com/apvarun/toastify-js",
  newWindow: true,
  close: true,
  gravity: "top", // `top` or `bottom`
  position: "left", // `left`, `center` or `right`
  stopOnFocus: true, // Prevents dismissing of toast on hover
  style: {
    background: "linear-gradient(to right, #00b09b, #96c93d)",
  },
  onClick: function(){} // Callback after click
}).showToast();

呈現的結果會類似這樣：