toastah: a simple android-like toast with jQuery

readme.md

toastah

a simple android-like toast with jQuery

installing

<!-- Import it after your stylesheets -->
<link rel="stylesheet" href="toastah.css">

<script src="jquery.js"></script>
<!-- Import it anywhere after jQuery -->
<script src="toastah.js"></script>

usage

toastah('The user has been created.')

toastah.css

.toast-float {
  display: flex;
  flex-direction: column;
  position: fixed;
  bottom: 32px;
  right: 32px;
  pointer-events: none;
  max-width: 320px;
  z-index: 1200;
}

.toast-float > .item {
  display: inline-block;
  padding: 16px;
  padding-right: 32px;
  font-size: 14px;
  color: #fff;
  background: #333;
  border-radius: 4px;
  pointer-events: all;
}

.toast-float > .item:not(:last-child) {
  margin-bottom: 16px;
}

.toast-float > .item > .close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-block;
  padding: 4px;
  margin: 0;
  color: #fff;
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 12px;
  opacity: 1;
}

toastah.js

;(function(window, $, undefined) {
  var body = $('body');
  var container = $('<div class="toast-float" data-toastah-container></div>');

  body.append(container);

  function toastah(message) {
    var item = $(`
      <div class="item">
        ${message}
      </div>
    `);

    container.append(item);

    setTimeout(() => {
      item.remove();
    }, 10000);
  }

  window.toastah = toastah;
})(window, jQuery);