Оповещения

  alexei 05/12/2022 - 11:00

Здесь вы узнаете, как сделать "оповещения" при помощи CSS.


Оповещения

Оповещающие сообщения или оповещения могут использоваться для информирования пользователя о различных событиях. События могут быть разных типов: предупреждения, информация, сбои или опасности, успешное выполнение.

× Опасность! Информирует о сбое или потенциально опасном действии.
× Успех! Информирует об успешном завершении какого-то процесса.
× Информация! Сообщает о чем-то нейтральном.
× Внимание! Информирует о чем-то, требующем внимания.

Как сделать оповещающее сообщение

Шаг 1) Добавляем HTML:


<div class="alert">
  <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
  Это оповещение.
</div>

Если вы хотите, чтобы сообщение можно было закрыть, добавьте элемент <span> с атрибутом onclick, который говорит "когда вы нажмете на меня, будет скрыт мой родительский элемент" – которым является контейнер <div> (class="alert").

Совет: Чтобы создать символ "х", используйте HTML сущность "&times;".

Шаг 2) Добавляем CSS:

Определяем стили оповещающих сообщений и закрывающей кнопки:


/* Стили оповещающего сообщения */
.alert {
  padding: 20px;
  background-color: #f44336; /* Красный */
  color: white;
  margin-bottom: 15px;
}

/* Закрывающая кнопка */
.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

/* Стиль при наведении мыши на закрывающую кнопку */
.closebtn:hover {
  color: black;
}

Несколько оповещений

Если у вас на странице есть несколько оповещающих сообщений, то можно добавить следующий скрипт, который будет закрывать разные сообщения. При этом не нужно использовать атрибут onclick у каждого элемента <span>.

Кроме этого, если вы хотите, чтобы во время закрытия оповещение плавно исчезало, то добавьте свойства opacity и transition в класс alert:


<style>
.alert {
  opacity: 1;
  transition: opacity 0.6s; /* появление за 600мс */
}
</style>

<script>
// Получим все элементы с атрибутом class="closebtn"
var close = document.getElementsByClassName("closebtn");
var i;

// Проходим по всем закрывающим кнопкам
for (i = 0; i < close.length; i++) {
  // Если кто-то нажмет на закрывающую кнопку
  close[i].onclick = function(){

    // Получим родителя для <span class="closebtn"> (<div class="alert">)
    var div = this.parentElement;

    // Установим свойство opacity в 0 (прозрачное)
    div.style.opacity = "0";

    // Прячем div через 600мс (то же время, что и для появления)
    setTimeout(function(){ div.style.display = "none"; }, 600);
  }
}
</script>

Совет: Также, читайте статью Информационные заметки.