About
alert are dialog showing a short message that comes at the top or bottom of your page.
See also Toasts
Articles Related
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.
Example
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">×</span>
</button>
</div>