A Simple Toast Notification Popup JavaScript Library | popup.js

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

See Demo And Download

Official Website(ohno): Click Here

This superior jQuery/javascript plugin is developed by ohno. For extra Advanced Usages, please go to the official website.

Related Posts


Generating Beautiful Vector Graphs With jQuery | smartGraph

SmartGraph is a free and easy-to-use JavaScript library to create beautiful vector diagrams with many customizations. This plugin allows developers to create dynamic, responsive, draggable vector graphics…


Image Slider With 20 Cool Transitions Component | vue-flux

Vue flux is an image slider developed with Vuejs 2 that comes with 20+ nice transitions out of the box. Included transitions 2D transitions Fade: Fades from…


Simple background Image Parallax Scroll Plugin In jQuery

Background parallax effect is a simple jQuery background image without any library. Uses jQuery’s scroll() function to track the scroll event and applies the exact parallax scroll…


Modular Color Picker Plugin for Bootstrap | BS Colorpicker

Bootstrap Colorpicker is a standard color picker plugin for Bootstrap 4. Colorpicker Plugin for Bootstrap 5/4/3 frameworks that allow you to add a color picker to an…


GDPR Friendly iFrame Manager In Vanilla JS | iframemanager

IframeMananger is a lightweight JavaScript plug-in that helps you to comply with GDPR by completely removing iframes at first and setting a notice related to that service….


Diagonal Thumbnails Carousel Slider | Anime.js

Diagonal Slider is a cool mini carousel made with Anime.js JavaScript library. It takes a bunch of pictures and turns them into a circular user interface where…