Toast-like Notification Popup Plugin For jQuery - MyFakeToast

MyFakeToast is a really simple jQuery plugin used to create toast-like notification popups for your webapp that supports any html contents and auto hides after a given timeout.

How to use it:

1. Load jQuery library and the jQuery MyFakeToast plugin's script right before the closing body tag.

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="js/my-fake-toast.js"></script>

2. Create a container for the toast messages.

<div class="toastMe"></div>

3. The JavaScript to create a basic toast popup that will auto dismiss after 2 seconds.

toastMe("Hi! I'm a toast!", 2000);

4. The JavaScript to create a rich content toast popup that will auto dismiss after 5 seconds.

toastMe('<p>Any content here</p>', 5000);

5. Override the default CSS styles to customize the toast popups.

.toastMe {
  position: absolute;
  width: 80vw;
  bottom: 10vh;
  margin-left: 6vw;
  margin-right: 10vw;
  padding: 1em;
  z-index: 1000;
  box-shadow: 1px 1px 25px black;
  background: rgba(50,50,50, .8);
  color: #fff;
  text-shadow: 0px 0px 4px black;
  text-align: center;
  border-radius: 500px;
  border: 1 solid rgba(50,50,50,1);
  transition: display 1.5s;
}

.toastHide { display: none; }

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes 
fadeIn { 0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes 
fadeIn { 0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes 
fadeOut { 0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes 
fadeOut { 0% {
opacity: 1;
}
100% {
opacity: 0;
}
}

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

---

This awesome jQuery plugin is developed by braglin. For more Advanced Usages, please check the demo page or visit the official website.