Как создать: Сообщения о предупреждениях

Учимся использовать CSS для создания сообщений о предупреждениях.

Предупреждение

Сообщения о предупреждениях можно использовать для уведомления пользователей о некоторых специальных事项ах: опасности, успехе, информации или предупреждении.

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

Попробуйте сами

Создание сообщения о предупреждении

Шаг 1 - Добавление HTML:

<div class="alert">
  <span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
  Это сообщение о предупреждении.
</div>

Если вы хотите关闭 уведомление, добавьте onclick свойства <span> Элемент, свойство которого означает «скрыть родительский элемент при нажатии на меня» - то есть контейнер <div class="alert">.

Совет:Использование HTML-символа "×" для создания буквы "x".

第二步 - Добавление 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;
}

Попробуйте сами

несколько уведомлений

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

И если вы хотите, чтобы при нажатии на уведомление они медленно затухали, добавьте непрозрачность и переход к свойству alert В классе:

Пример

<style>
.alert {
  opacity: 1;
  transition: opacity 0.6s; /* 600 миллисекунд затухание */
}
</style>
<script>
// Получить все элементы с классом "closebtn"
var close = document.getElementsByClassName("closebtn");
var i;
// Пройтись по всем кнопкам закрытия Loop through all close buttons
for (i = 0; i < close.length; i++) {
  // Пройтись по всем кнопкам закрытия
  close[i].onclick = function(){
    // Получить родительский элемент <span class="closebtn"> (div class="alert")
    var div = this.parentElement;
    // Установить непрозрачность div в 0 (прозрачный)
    div.style.opacity = "0";
    // 600 миллисекунд после этого скрыть div (время, необходимое для затухания)
    setTimeout(function(){ div.style.display = "none"; }, 600);
  }
}
</script>

Попробуйте сами

Связанные страницы

Урок:Как создать стикер