UI - Alert

> User Interface (GUI)

1 - About

alert are dialog showing a short message that comes at the top or bottom of your page.

See also Toasts

Advertising

3 - Characteristics

alert:

  • is a minimul call to action
  • are located generally at the top or bottom of the page
  • can be dismissed
  • can be used for consent.

4 - Example

4.1 - Bootstrap

https://getbootstrap.com/docs/4.0/components/alerts/

$('#myAlert' ).addClass("show"); // Show the alert
$('#myAlert').alert(); // enable dismissal of an alert, same as data-dismiss="alert" on the button
$('#myAlert').on('closed.bs.alert', function () {
  //  This event is fired when the alert has been closed (will wait for CSS transitions to complete)
  console.log("Alert was closed");
})
<div id="myAlert" class="alert alert-warning alert-dismissible fade" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

5 - Documentation