Здесь вы узнаете, как сделать "оповещения" при помощи CSS.
Оповещения
Оповещающие сообщения или оповещения могут использоваться для информирования пользователя о различных событиях. События могут быть разных типов: предупреждения, информация, сбои или опасности, успешное выполнение.
Как сделать оповещающее сообщение
Шаг 1) Добавляем HTML:
Пример
<div class="alert">
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
Это оповещение.
</div>
Если вы хотите, чтобы сообщение можно было закрыть, добавьте элемент <span> с атрибутом onclick, который говорит "когда вы нажмете на меня, будет скрыт мой родительский элемент" – которым является контейнер <div> (class="alert").
Совет: Чтобы создать символ "х", используйте HTML сущность "×".
Шаг 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>
Совет: Также, читайте статью Информационные заметки.
