Mobile First Toast Message Plugin With jQuery - showToast

showToast is a simplest jQuery/Zepto based toaster that helps you display Android-style toast messages on the screen. By default, the toast message will auto dismiss after 1500ms.

How to use it:

1. Include the needed jQuery or Zepto JavaScript library on the webpage.

<script src="/path/to/jquery.min.js"></script>
<!-- Or -->
<script src="/path/to/zepto.min.js"></script>

2. Make sure to load the jQuery showToast plugin's script after jQuery/Zepto library.

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

3. Shows a custom toast message on the screen and config it to auto dismiss after 2500ms.

showToast.show('This is a Toast Message!',2500)

4. Modify, override or adjust the following CSS snippets to create your own styles.

.showToast {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 19891014;
}

.showToastInner {
  pointer-events: none;
  display: table;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.showToastTips {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.showToastTips .showToastCon {
  display: inline-block;
  position: relative;
  background-color: rgba(0,0,0,0.8);
  color: #fff;
  padding: 10px 15px;
  font-size: 14px;
  border-radius: 6px;
  box-shadow: 0 0 8px rgba(0,0,0,.1);
  pointer-events: auto;
  animation-name: fieldTipBounceIn;
  -webkit-animation-name: fieldTipBounceIn;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: .18s;
  animation-duration: .18s;
}
@-webkit-keyframes 
fieldTipBounceIn {  0% {
 opacity: 0;
 -webkit-transform: scale3d(.3, .3, .3);
 transform: scale3d(.3, .3, .3);
}
 100% {
 opacity: 1;
 -webkit-transform: scale3d(1, 1, 1);
 transform: scale3d(1, 1, 1);
}
}

---

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