Alert

• Introduction
• Basic Example
• Real World Example

Creates a highly visible message to alert the user.

---

Getting Started

First load the seed and CSS files, if you haven't yet.

<script src="https://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
<link href="https://cdn.alloyui.com/3.0.1/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>

Then initialize AlloyUI and load the Alert module.

YUI().use(
  'aui-alert',
  function(Y) {
  // code goes here
  }
);

---

Using Alert

Simple alerts can be created by appending the alert class to the appropriate element. There are other classes like alert-warning or alert-info that can help better display your message according to it's context.

<div class="alert">This is an alert.</div>
<div class="alert-info">Here is some information</div>
<div class="alert-danger">Oh no, watch out!</div>

You can also create alerts with JavaScript. Start by adding the containing div to the page:

<div id="myAlert"></div>

Next we create a new Alert instance and set it's source node to the appropriate selector. We can then set our desired message and render it for display:

YUI().use(
  'aui-alert',
  function(Y) {
    new Y.Alert(
      {
        boundingBox: '#myAlert',
        bodyContent: 'This is an alert',
        closeable: true,
        cssClass: 'alert-info',
        render: true
      }
    );
  }
);

Configuring Alert

There are many options that can help you achieve the desired behavior for your alert. These include things like animated, permanent, and dismissable alerts:

YUI().use(
  'aui-alert',
  function(Y) {
    new Y.Alert(
    {
        animated: true,
        boundingBox: '#fancyAlert',
        bodyContent: 'This is animated alert alert',
        closeable: true,
        cssClass: 'alert-warning',
        destroyOnHide: false,
        duration: 2
      }
    );
  }
);