Документация для разработчиков
Темная тема

Алерты

Вызов и базовый стиль

Вызов

\Bitrix\Main\UI\Extension::load("ui.alerts");

Базовый стиль

Внимание! Текст предупреждения находится здесь.

<!-- .ui-alert -->
<div class="ui-alert">
    <span class="ui-alert-message"><strong>Внимание!</strong> Текст предупреждения находится здесь.</span>
</div>

Размеры

MD

Модификатор .ui-alert-md. Размер по умолчанию.

Внимание! Текст предупреждения находится здесь.

<!-- .ui-alert.ui-alert-md -->
<div class="ui-alert ui-alert-md">
    <span class="ui-alert-message"><strong>Внимание!</strong> Текст предупреждения находится здесь.</span>
</div>

XS

Модификатор .ui-alert-xs. Размер по умолчанию.

Внимание! Текст предупреждения находится здесь.

<!-- .ui-alert.ui-alert-xs-->
<div class="ui-alert ui-alert-xs">
    <span class="ui-alert-message"><strong>Внимание!</strong> Текст предупреждения находится здесь.</span>
</div>

Цвет

Default

Модификатор .ui-alert-default. Цвет по умолчанию.

Внимание! Текст предупреждения находится здесь.

<!-- .ui-alert.ui-alert-default -->
<div class="ui-alert ui-alert-default ">
    <span class="ui-alert-message"><strong>Внимание!</strong> Текст предупреждения находится здесь.</span>
</div>

Success

Модификатор .ui-alert-success. Цвет по умолчанию.

Внимание! Текст предупреждения находится здесь.

<!-- .ui-alert.ui-alert-success-->
<div class="ui-alert ui-alert-success">
    <span class="ui-alert-message"><strong>Внимание!</strong> Текст предупреждения находится здесь.</span>
</div>

Danger

Модификатор .ui-alert-danger. Цвет по умолчанию.

Внимание! Текст предупреждения находится здесь.

<!-- .ui-alert.ui-alert-danger-->
<div class="ui-alert ui-alert-danger">
    <span class="ui-alert-message"><strong>Внимание!</strong> Текст предупреждения находится здесь.</span>
</div>

Warning

Модификатор .ui-alert-warning. Цвет по умолчанию.

Внимание! Текст предупреждения находится здесь.

<!-- .ui-alert.ui-alert-warning-->
<div class="ui-alert ui-alert-warning">
    <span class="ui-alert-message"><strong>Внимание!</strong> Текст предупреждения находится здесь.</span>
</div>

Primary

Модификатор .ui-alert-primary. Цвет по умолчанию.

Внимание! Текст предупреждения находится здесь.

<!-- .ui-alert.ui-alert-primary-->
<div class="ui-alert ui-alert-primary">
    <span class="ui-alert-message"><strong>Внимание!</strong> Текст предупреждения находится здесь.</span>
</div>

Иконки

Внимание! Текст предупреждения находится здесь.

<!-- .ui-alert.ui-alert-icon-warning-->
<div class="ui-alert ui-alert-icon-warning">
    <span class="ui-alert-message"><strong>Внимание!</strong> Текст предупреждения находится здесь.</span>
</div>

Внимание! Текст предупреждения находится здесь.

<!-- .ui-alert.ui-alert-icon-danger-->
<div class="ui-alert ui-alert-icon-danger">
    <span class="ui-alert-message"><strong>Внимание!</strong> Текст предупреждения находится здесь.</span>
</div>

Внимание! Текст предупреждения находится здесь.

<!-- .ui-alert.ui-alert-icon-info-->
<div class="ui-alert ui-alert-icon-info">
    <span class="ui-alert-message"><strong>Внимание!</strong> Текст предупреждения находится здесь.</span>
</div>

Закрытие

Кнопка закрытия

В .ui-alert необходимо добавить .ui-alert-close-btn.

Внимание! Текст предупреждения находится здесь.

<!-- .ui-alert.ui-alert-close-btn-->
<div class="ui-alert ui-alert-close-btn">
    <span class="ui-alert-message"><strong>Внимание!!!</strong> Текст предупреждения находится здесь.</span>
</div>

Закрытие с анимацией

После добавления класса .ui-alert-close-animate на .ui-alert весь блок схлопнется с анимацией. Анимация занимает 300ms, после чего элемент можно удалить.

Внимание! Текст предупреждения находится здесь.
<!-- .ui-alert.ui-alert-close-animate > span.ui-alert-close-btn -->
<div class="ui-alert ui-alert-close-animate">
    <span class="ui-alert-message"><strong>Внимание!</strong> Текст предупреждения находится здесь.</span>
    <span class="ui-alert-close-btn"></span>
</div>

Прочее

Текст по центру

Модификатор .ui-alert-text-center.

Внимание! Текст предупреждения находится здесь.

<!-- .ui-alert.ui-alert-text-center-->
<div class="ui-alert ui-alert-text-center">
    <span class="ui-alert-message"><strong>Внимание!</strong> Текст предупреждения находится здесь.</span>
</div>

Сообщение типа inline-block

Модификатор .ui-alert-inline.

Внимание! Текст предупреждения находится здесь.

<!-- .ui-alert.ui-alert-inline ->
<div class="ui-alert ui-alert-inline ">
    <span class="ui-alert-message"><strong>Внимание!</strong> Текст предупреждения находится здесь.</span>
</div>


Пользовательские комментарии

Мы будем рады, если разработчики добавят свои комментарии по практическому использованию методов системы.

Для этого нужно всего лишь авторизоваться на сайте

Но помните, что Пользовательские комментарии, несмотря на модерацию, не являются официальной документацией. Ответственность за их использование несет сам пользователь.

Также Пользовательские комментарии не являются местом для обсуждения функционала. По подобным вопросам обращайтесь на форумы.
0
arnly
Сообщение не промодерировано, возможны ошибки и неточности.
Цитата
пишет:
Кнопка закрытия не работает у меня, и на этом сайте в примерах тоже. У кого-то заработала?
Код
<div class="ui-alert ui-alert-danger">
   <span class="ui-alert-message">Тест</span>
   <span class="ui-alert-close-btn" onc lick="this.parentNode.style.display = 'none';"></span>
</div>
0
arnly
Сообщение не промодерировано, возможны ошибки и неточности.
Цитата
пишет:
Кнопка закрытия не работает у меня, и на этом сайте в примерах тоже. У кого-то заработала?
Код
<div class="ui-alert ui-alert-danger">
   <span class="ui-alert-message">Тест</span>
   <span class="ui-alert-close-btn" oncl ick="this.parentNode.style.display = 'none';"></span>
</div>
0
arnly
Сообщение не промодерировано, возможны ошибки и неточности.
Цитата
пишет:
Кнопка закрытия не работает у меня, и на этом сайте в примерах тоже. У кого-то заработала?
Код
<div class="ui-alert ui-alert-danger">
   <span class="ui-alert-message">Тест</span>
   <span class="ui-alert-close-btn" oncl ick="this.parentNode.style.display = 'none';"></span>
</div>
0
arnly
Сообщение не промодерировано, возможны ошибки и неточности.
Цитата
пишет:
Кнопка закрытия не работает у меня, и на этом сайте в примерах тоже. У кого-то заработала?
Код
<div class="ui-alert ui-alert-danger">
   <span class="ui-alert-message">Тест</span>
   <span class="ui-alert-close-btn" oncl ick="this.parentNode.style.display = 'none';"></span>
</div>
0
bit64
Сообщение не промодерировано, возможны ошибки и неточности.
Кнопка закрытия не работает у меня, и на этом сайте в примерах тоже. У кого-то заработала?
© «Битрикс», 2001-2022, «1С-Битрикс», 2022
Наверх