UI - Alert

1 - About

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

See also Toasts

3 - Characteristics


  • 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


$('#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>

5 - Documentation

Data Science
Data Analysis
Data Science
Linear Algebra Mathematics

Powered by ComboStrap