Как сделать - Окно выноски сообщения
Узнать, как создать сообщения выноски с помощью CSS.
Выноска сообщения
Выноска сообщение часто размещается в нижней части страницы, чтобы уведомить пользователя о чем-то особенном: советы/рекомендации, скидки, необходимые действия, другое.
Создание выноски
Шаг 1) Добавить HTML:
Пример
<div class="callout">
<div class="callout-header">Заголовок выноски</div>
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
<div class="callout-container">
<p>Некоторый текст...</p>
</div>
</div>
Если вы хотите иметь возможность закрыть сообщение выноски, добавьте элемент <span> с помощью атрибут onclick
, который говорит "когда вы нажимаете на меня, скрывать мой родительский элемент" и - который является контейнером <div> (class="alert").
Совет: Используйте объект HTML "×
" чтобы создать письмо "x".
Шаг 2) Добавить CSS:
Стиль окна выноски и кнопки закрытия:
Пример
/* Поле выноски - фиксированное положение в нижней части страницы */
.callout {
position: fixed;
bottom: 35px;
right: 20px;
margin-left: 20px;
max-width: 300px;
}
/* Заголовок выноски */
.callout-header {
padding: 25px 15px;
background: #555;
font-size: 30px;
color: white;
}
/* Контейнер/тело выноски */
.callout-container {
padding: 15px;
background-color: #ccc;
color: black
}
/* Кнопка закрытия */
.closebtn {
position: absolute;
top: 5px;
right: 15px;
color: white;
font-size: 30px;
cursor: pointer;
}
/* Изменение цвета при наведении курсора мыши */
.closebtn:hover {
color: lightgrey;
}
Редактор кода »Совет:Кроме того, проверить Предупреждающее сообщение.
Совет:Кроме того, проверить Примечания.