W3.CSS Оповещения / Предупреждения
Класс w3-panel является идеальным классом для отображения всех типов оповещений (предупреждений):
Опасность!
Красный цвет часто указывает на опасную или негативную ситуацию.
Оповещения часто отображаются с использованием сильного (яркого) цвета:
Опасность!
Красный цвет часто указывает на опасную или негативную ситуацию.
Пример
<div class="w3-panel w3-red">
<h3>Опасность!</h3>
<p>Красный цвет часто указывает на опасную или негативную ситуацию.</p>
</div>
Попробуйте сами »
Отображение предупреждений
Предупреждение!
Желтый цвет часто указывает на предупреждение, которое может потребовать внимания.
Предупреждение!
Желтый часто указывает на предупреждение, которое может потребовать внимания.
Пример
<div class="w3-panel w3-yellow">
<h3>Предупреждение!</h3>
<p>Желтый часто указывает на предупреждение, которое может потребовать внимания.</p>
</div>
Попробуйте сами »
Отображение успеха (успешного выполнения)
Успех!
Зеленый часто указывает на что-то успешное или положительное.
Успех!
Зеленый часто указывает на что-то успешное или положительное.
Пример
<div class="w3-panel w3-green">
<h3>Успех!</h3>
<p>Зеленый часто указывает на что-то успешное или положительное.</p>
</div>
Попробуйте сами »
Отображение информации
Инфо!
Синий часто указывает на нейтральное информативное изменение или действие.
Инфо!
Синий часто указывает на нейтральное информативное изменение или действие.
Пример
<div class="w3-panel w3-blue">
<h3>Информация!</h3>
<p>Синий часто указывает на нейтральное информативное изменение или действие.</p>
</div>
Попробуйте сами »
Использование контейнера
Класс w3-container также может быть использован для отображения оповещений (предупреждений):
Пример
<div class="w3-container w3-red">
<h3>Опасность!</h3>
<p>Красный часто указывает на опасную или негативную ситуацию.</p>
</div>
Попробуйте сами »
Оповещения во всех цветах
Оповещения часто отображаются в специальных (определённых) цветах, но можно использовать любой цвет:
Опасность!
Красный цвет часто указывает на опасную или негативную ситуацию.
Опасность!
Красный часто указывает на опасную или негативную ситуацию.
Опасность!
Красный часто указывает на опасную или негативную ситуацию.
Опасность!
Красный часто указывает на опасную или негативную ситуацию.
Опасность!
Красный часто указывает на опасную или негативную ситуацию.
Пример
<div class="w3-panel w3-blue-grey">
<h3>Опасность!</h3>
<p>Красный часто указывает на опасную или негативную ситуацию.</p>
</div>
Попробуйте сами »
Закрытие оповещений
Чтобы закрыть окно предупреждения, нажмите X в правом верхнем углу:
Опасность!
Красный часто указывает на опасную или негативную ситуацию.
Чтобы создать X, закрывающий предупреждение, добавьте элемент <span> с классом w3-button и событием onclick:
Пример
<span onclick="this.parentElement.style.display='none'"
class="w3-button
w3-display-topright">×</span>
Попробуйте сами »
Совет: HTML сущность × является предпочтительным значком для кнопок закрытия (вместо буквы "X").
Округлые оповещения
Используйте классы w3-round, если вы хотите закругленные углы:
Успех!
Здесь используется w3-round.
Успех!
Здесь используется w3-round-large.
Успех!
Здесь используется w3-round-xxlarge.
Оповещение как карточка
Используйте класс w3-card если вы хотите, чтобы оповещение отображалось как карточка:
Предупреждение!
Желтый цвет часто указывает на то, что требует внимания.
