Home Javascript A Simple Toast Notification Popup JavaScript Library | popup.js

A Simple Toast Notification Popup JavaScript Library | popup.js

Javascript webcodeflow · October 26, 2021 · Comments off

popup.js is a notification popup library for creating toast-like alert messages on a page.

toast notification no jquery, javascript toast message example, vanilla toast js, toast notification github, toastify js

How to make use of it:

1. Include the necessary JavaScript and stylesheet on the page.

<link rel="stylesheet" href="popup.css" />
<script src="popup.js"></script>

2. Create a basic toast popup.

popup("Hello World!");

3. Bring a toast message from a specific item.

<input id="input" value="Toast Message Here">
<button onClick='popup(document.getElementById("input").value);'>Click Me</button>

4. Override the default popup styles.

.popup {
  color: #FFFFFF;
  background: rgba(0,0,0,0.8);
  opacity: 1;
  padding: 20px;
  border-radius: 3px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Minimal Toast Popup JavaScript Library, popup.js Plugin/Github