Bootstrap 4 JS Alert

Clases CSS Alert

Clase Descripción
.alert Crea un cuadro de mensaje de alerta
.alert-danger Alerta roja, indica una acción peligrosa y potencialmente negativa
.alert-dark Cuadro de mensaje de alerta gris oscuro
.alert-dismissible Indica un cuadro de alerta que se puede cerrar. Junto con la clase .close, esta clase se usa para cerrar la alerta (agrega relleno adicional)
.alert-heading Agrega color: hereda al elemento especificado
.alert-info Alerta azul claro. Indica un cambio o acción informativa neutral
.alert-light Alerta de luz. Cuadro de alerta gris claro
.alert-link Se utiliza en enlaces dentro de alertas para proporcionar enlaces de colores coincidentes
.alert-primary Alerta azul, indica una importante acción
.alert-secondary Alerta gris, indica una acción menos importante
.alert-success Alerta verde. Indica una acción exitosa o positiva
.alert-warning Alerta amarilla. Indica precaución con esta acción.
.close Estiliza el botón de cierre para el mensaje de alerta (flota a la derecha con un tamaño de fuente, color, etc. especificado)

Cerrar alertas a través de datos- * Atributos

Agrega data-dissmiss=»alert» a un enlace o elemento de botón para cerrar el mensaje de alerta.

Ejm

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Alerts</h2>
  <p>The button with class="close" and data-dismiss="alert" is used to close the alert box.</p>
  <p>The alert-dismissible class adds some extra padding to the close button.</p>
  <div class="alert alert-success alert-dismissible">
    <button type="button" class="close" data-dismiss="alert">×</button>
    <strong>Success!</strong> This alert box could indicate a successful or positive action.
  </div>
</div>

</body>
</html>

Cerrar alertas vía Javascript

Podemos cerrar las alertas manualmente, veamos un ejm.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Close Alerts Via JavaScript</h2>
  <div class="alert alert-success alert-dismissible" id="myAlert">
    <button type="button" class="close">&times;</button>
    <strong>Success!</strong> This alert box could indicate a successful or positive action.
  </div>
</div>

<script>
$(document).ready(function(){
  $(".close").click(function(){
    $("#myAlert").alert("close");
  });
});
</script>

</body>
</html>

Opciones de Alerta

Métodos de alerta

La siguiente tabla lista todos los posibles métodos de alerta

Método Descripción
.alert(«close») Cierra un mensaje de alerta
.alert(«dispose») Destruye un elemento de alerta

Eventos de alerta

La siguiente tabla lista todos los posibles eventos de alerta

Evento Descripción
close.bs.alert Se produce cuando el mensaje de alerta está a punto de cerrarse
closed.bs.alert Se produce cuando se cierra el mensaje de alerta (esperará a que se completen las transiciones CSS)