Блок предупреждений Foundation
Foundation позволяет легко создать блок предупреждений:
Блок предупреждений можно использовать.alert-boxСоздание класса, можно добавить дополнительные классы:.secondary, .success, .info, .warningили.alert:
Пример
<div data-alert class="alert-box">
Это блок предупреждений по умолчанию.
</div>
<div data-alert class="alert-box secondary">
Это вторичный блок предупреждений.
</div>
<div data-alert class="alert-box success">
<strong>Успех!</strong> Это окно оповещения указывает на успешное или положительное действие.
</div>
<div data-alert class="alert-box info">
<strong>Информация!</strong> Это окно оповещения указывает на нейтральное информативное изменение или действие.
</div>
<div data-alert class="alert-box warning">
<strong>Предупреждение!</strong> Это окно оповещения указывает на предупреждение, которое может потребовать внимания.
</div>
<div data-alert class="alert-box alert">
<strong>Внимание!</strong> Это окно оповещения указывает на опасное или потенциально негативное действие.
</div>
Это блок предупреждений по умолчанию.
</div>
<div data-alert class="alert-box secondary">
Это вторичный блок предупреждений.
</div>
<div data-alert class="alert-box success">
<strong>Успех!</strong> Это окно оповещения указывает на успешное или положительное действие.
</div>
<div data-alert class="alert-box info">
<strong>Информация!</strong> Это окно оповещения указывает на нейтральное информативное изменение или действие.
</div>
<div data-alert class="alert-box warning">
<strong>Предупреждение!</strong> Это окно оповещения указывает на предупреждение, которое может потребовать внимания.
</div>
<div data-alert class="alert-box alert">
<strong>Внимание!</strong> Это окно оповещения указывает на опасное или потенциально негативное действие.
</div>
Попробуйте сами »
 |
Окно оповещения занимает 100% ширины своего контейнера. |
|---|
Скругленная выноска
.radiusи.roundЭтот класс используется для добавления закруглённых углов к блокам предупреждения:
Пример
<div data-alert class="alert-box success radius">
<strong>Успех!</strong> Блок предупреждения со скруглением.
</div>
<div data-alert class="alert-box info round">
<strong>Информация!</strong> Закруглённый блок предупреждения.
</div>
<strong>Успех!</strong> Блок предупреждения со скруглением.
</div>
<div data-alert class="alert-box info round">
<strong>Информация!</strong> Закруглённый блок предупреждения.
</div>
Попробуйте сами »
Закрыть выноску
Чтобы закрыть блок предупреждения, добавьте его к элементу ссылки или кнопки:class="close"class, и инициализируйте Foundation JS:
Пример
<div data-alert class="alert-box">
Это стандартный блок предупреждения с функцией закрытия.
<a href="#" class="close">×</a>
</div>
<script>
// Инициализация Foundation JS для функциональности
$(document).ready(function() {
$(document).foundation();
})
</script>
Это стандартный блок предупреждения с функцией закрытия.
<a href="#" class="close">×</a>
</div>
<script>
// Инициализация Foundation JS для функциональности
$(document).ready(function() {
$(document).foundation();
})
</script>
Попробуйте сами »
|
× (×) — это HTML-сущность символа, обозначающая значок кнопки закрытия, а не букву "x". |
|---|