SOURCE

function toast (options = {}) {
  const $div = document.createElement('div')
  const timer = 500
  $div.innerHTML = options.text || ''
  $div.style.transitionDuration = timer + 'ms'
  $div.classList.add('c-toast')
  $div.classList.add(`c-toast_${options.position}`)

  document.body.appendChild($div)
  setTimeout(() => {
    $div.style.opacity = 1
  })
  setTimeout(() => {
    $div.style.opacity = 0
    setTimeout(() => {
      $div.remove()
    }, timer)
  }, 2000)
}

toast({
  text: '123',
  position: 'bottom'
})

.c-toast {
  position: absolute;
  top: 40px;
  bottom: auto;
  opacity: 0;
  z-index: 10000;
  max-width: 90%;
  left: 50%;
  transform: translateX(50%);
  font-size: 16px;
  line-height: 24px;
  padding: 4px 10px;
  border-radius: 8px;
  color: #ffffff;
  background-color: rgba(0, 0, 0, .45);
  transition: opacity .5s;
}

.c-toast_top {
  top: 40px;
  bottom: auto;
}

.c-toast_middle {
  transform: translateY(-50%);
  top: 50%;
}

.c-toast_bottom {
  top: auto;
  bottom: 40px;
}