Minimal Toast Popup JavaScript Library – popup.js

Preview:

Description:

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

How to use 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. Fetch the toast message from a given element.

<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%);
}