Alerts

Call

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

Basic style

<!-- .ui-alert -->
<div class="ui-alert">
    <span class="ui-alert-message"><strong>Attention!</strong> Alert text is located here.</span>
</div>

Size

MD

Modifier .ui-alert-md. Default size.

<!-- .ui-alert.ui-alert-md -->
<div class="ui-alert ui-alert-md">
    <span class="ui-alert-message"><strong>Attention!</strong> Alert text is located here.</span>
</div>

XS

Modifier .ui-alert-xs. Default size.

<!-- .ui-alert.ui-alert-xs-->
<div class="ui-alert ui-alert-xs">
    <span class="ui-alert-message"><strong>Attention!</strong>Alert text is located here.</span>
</div>

Color

Default

Modifier .ui-alert-default. Default color.

<!-- .ui-alert.ui-alert-default -->
<div class="ui-alert ui-alert-default ">
    <span class="ui-alert-message"><strong>Attention!</strong> Alert text is located here.</span>
</div>

Success

Modifier .ui-alert-success. Default color.

<!-- .ui-alert.ui-alert-success-->
<div class="ui-alert ui-alert-success">
    <span class="ui-alert-message"><strong>Attention!</strong> Alert text is located here.</span>
</div>

Danger

Modifier .ui-alert-danger. Default color.

<!-- .ui-alert.ui-alert-danger-->
<div class="ui-alert ui-alert-danger">
    <span class="ui-alert-message"><strong>Attention!</strong> Alert text is located here.</span>
</div>

Warning

Modifier .ui-alert-warning. Default color.

<!-- .ui-alert.ui-alert-warning-->
<div class="ui-alert ui-alert-warning">
    <span class="ui-alert-message"><strong>Attention!</strong> Alert text is located here.</span>
</div>

Primary

Modifier .ui-alert-primary. Default color.

<!-- .ui-alert.ui-alert-primary-->
<div class="ui-alert ui-alert-primary">
    <span class="ui-alert-message"><strong>Attention!</strong> Alert text is located here.</span>
</div>

Icons

<!-- .ui-alert.ui-alert-icon-warning-->
<div class="ui-alert ui-alert-icon-warning">
    <span class="ui-alert-message"><strong>Attention!</strong> Alert text is located here.</span>
</div>

<!-- .ui-alert.ui-alert-icon-danger-->
<div class="ui-alert ui-alert-icon-danger">
    <span class="ui-alert-message"><strong>Attention!</strong> Alert text is located here.</span>
</div>

<!-- .ui-alert.ui-alert-icon-info-->
<div class="ui-alert ui-alert-icon-info">
    <span class="ui-alert-message"><strong>Attention!</strong> Alert text is located here.</span>
</div>

Closing button

Add span.ui-alert-close-btn in .ui-alert .

<!-- .ui-alert.ui-alert-close-btn-->
<div class="ui-alert ui-alert-close-btn">
    <span class="ui-alert-message"><strong>Attention!</strong> Alert text is located here.</span>
</div>

Closing with animation

After adding a class .ui-alert-close-animate in .ui-alert, the complete block hides with animation. Animation occupies 300ms, after that the element can be deleted.

<!-- .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>Attention!</strong> Alert text is located here.</span>
    <span class="ui-alert-close-btn"></span>
</div>

Other

Text at center

Modifier .ui-alert-text-center.

<!-- .ui-alert.ui-alert-text-center-->
<div class="ui-alert ui-alert-text-center">
    <span class="ui-alert-message"><strong>Attention!</strong> Alert text is located here.</span>
</div>

Inline-block message type

Modifier .ui-alert-inline.

<!-- .ui-alert.ui-alert-inline ->
<div class="ui-alert ui-alert-inline ">
    <span class="ui-alert-message"><strong>Attention!</strong> Alert text is located here.</span>
</div>