Как автоматически через определенное время показать уведомление и так же скрыть через время без нажатия?

Question

[Сергей Пантилеев]

Доброго времени суток. Помогите решить несложную задачу. Я новичок. У меня есть код ниже. С помощью него при нажатии появляется уведомление и через 3 секунды исчезает.

КАК сделать чтобы уведомление без нажатия автоматически появлялось через время, так же и исчезало через определенное время ?

<script> 
	  function notificate(head, text) {

  var icon = 'fa fa-times';
  var iconcolor = '#fff';


  newbox = '<div id="notification"><div class="icon"><i class="fa fa-exclamation-triangle" style="color:' + iconcolor + ';"></i></div><b>' + head + '</b><p>' + text + '</p></div>';

  notifications.innerHTML = notifications.innerHTML + newbox;

  
  setTimeout(function () {
    $('div#notification').fadeOut();
  }, 3000);  
}
</script>

<div onclick="notificate('Заголовок', 'Содержание уведомления1');" style="padding:10px;border-radius:5px;background:#fff;display:inline-block;cursor:pointer;">Вывести уведомление</div>

<div id="notifications">
</div>

#notifications {
  position: fixed;
  left: 20px;
  bottom: 0px;
  width: 400px;
}
#notification {
  width: 100%;
  height: 100px;
  background: #303030;
  box-shadow: 0px 0px 10px #222;
  margin: 0 0 20px 0;
  transition: all ease-in-out 0.05s;
  position: relative;
  left: 0;
  opacity: 1;
  transform: scale(1);
  cursor: pointer;
  animation-delay: 5s;
}
#notification:active {
  transform: scale(0.97);
}
#notification .icon {
  width: 100px;
  height: 100px;
  background: #282828;
  float: left;
}
#notification .icon i {
  color: #e74c3c;
  font-size: 50px;
  margin: 25px;
  width: 50px;
  text-align: center;
}
#notification p {
  float: left;
  margin: 15px;
  display: block;
  color: #ccc;
  width: 270px;
  margin-top: 5px;
}
#notification p b {
  margin: 0;
}
#notification b {
  float: left;
  margin: 10px 15px;
  display: block;
  color: #ccc;
  margin-bottom: 0;
  font-weight: 900;
}

Answer 1

[ksnk]

setTimeout(function () {
    notificate('Заголовок', 'Содержание уведомления1');
  }, 15*60000); // 15 мин

Comments

[Сергей Пантилеев]

Срабатывает уведомление только при нажатии на DIV ( Вывести уведомления ) И только когда уведомление появляется после нажатия работает ваш скрипт - Добавляются уведомления.

Как можно сделать чтоб это уведомление всплывало через 3 секунды после загрузки страницы ? Без нажатия на ( Вывести уведомления ) Автоматически. И скрылось автоматически через 5 секунд. ?

[ksnk]

А куда вставлялся мой код? Его нужно было вставить поле описания функции notificate. К примеру, перед закрывающим тегом

Answer 2

[Дядя Ваня]

Jquery и два метода show и hide. И прочитайте про SetTimeout

setTimeout(function () {
$('#notification').show();
}, 3000);

setTimeout(function () {
$('#notification').hide();
}, 8000);