Как сделать - Окно тревоги
Узнать, как создать окно тревоги с помощью CSS.
Окна оповещения
Оповещение сообщения могут быть использованы для уведомления пользователя о чем-то особенном: опасности, успехе, информации или предупреждении.
Создать окно тревоги
Шаг 1) Добавить HTML:
Пример
<div class="alert">
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
Это окно оповещения.
</div>
Если вы хотите иметь возможность закрыть предупреждающее сообщение, добавить в элемент <span> с тегом onclick атрибут, который говорит "когда вы нажимаете на меня, скрывать мой родительский элемент" - который является контейнером <div> (class="alert").
Совет: Используйте объект HTML "×" чтобы создать письмо "x".
Шаг 2) Добавить CSS:
Стиль окна оповещения и кнопки закрытия:
Пример
/* Окно предупреждающего сообщения */
.alert {
padding: 20px;
background-color: #f44336; /* Red */
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;
// Установите непрозрачность div в 0 (transparent)
div.style.opacity = "0";
// Скрыть div после 600 мс (столько же миллисекунд требуется, чтобы исчезнуть)
setTimeout(function(){ div.style.display = "none"; }, 600);
}
}
</script>
Редактор кода »
Совет:Кроме того, проверить Примечания.
