Display success, or error messages.
To apply this component, add the data-z-alert attribute to a block element.
<div class="z-alert" data-z-alert></div>To create a close button and enable its functionality, add the .z-alert-close class to a <button> or <a> element inside the alert box. To apply a close icon, add the data-z-close attribute from the Close component.
<div class="z-alert" data-z-alert>
<a href class="z-alert-close"></a>
</div>There are several style modifiers available. Just add one of the following classes to apply a different look.
.z-alert-danger.z-alert-warning.z-alert-success.z-alert-infoAny of these options can be applied to the component attribute. Separate multiple options with a semicolon. Learn more
| Option | Value | Default | Description |
|---|---|---|---|
animation | Boolean | true | Fade out or hide directly. |
duration | Number | 150 | Animation duration in milliseconds. |
sel-close | CSS selector | .z-alert-close | The close trigger element. |
animation is the Primary option and its key may be omitted, if it’s the only option in the attribute value.
<span data-z-toggle=".my-class"></span>Learn more about JavaScript components.
zUIkit.alert(element, options);The following events will be triggered on elements with this component attached:
| Name | Description |
|---|---|
beforehide | Fires before an item is hidden. Can prevent hiding by calling preventDefault() on the event. |
hide | Fires after an item is hidden. |
The following methods are available for the component:
zUIkit.alert(element).close();Closes and removes the Alert.