UI - Alert

Card Puncher Data Processing


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

See also Toasts



  • 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.




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


Discover More
Card Puncher Data Processing
Ads - Consent Management (CM - CMP)

Consent Management is a mandatory privacy process due to gdpr where a website showing a page to a EU resident needs the consent of the user in order to use their data (cookies,..) The consent box may...
How to create a modal with Bootstrap?

This page shows you how to create a modal with Bootstrap. No more than one modal is shown by page but you can switch between them. alert Bootstrap uses the modal.js...
Card Puncher Data Processing
UI - Dialog

dialog is a overlay window (floating element) that requires immediate attention, appearing over the page content and blocking interactions with the page until it is dismissed through an action....
Card Puncher Data Processing
UI - Toast

A toast provides simple feedback an operation in a small popup. Notifications are pushed to the visitors in a lightweight and easily customizable alert message. The goal is to: disrupt at minima...
What is and how to create a web modal in pure HTML, Bootstrap and Jquery?

A modal is a overlay window behavior: where its contents are the only elements that can receive focus. When open, the user cannot interact with the rest of the page (nor can screen readers) until...

Share this page:
Follow us:
Task Runner