Bootstrap - Complemento de alerta

Los mensajes de alerta se utilizan principalmente para mostrar información como mensajes de advertencia o confirmación a los usuarios finales. Con el complemento de mensajes de alerta, puede agregar la funcionalidad de descarte a todos los mensajes de alerta.

Si desea incluir esta funcionalidad de complemento individualmente, necesitará el alert.js. De lo contrario, como se menciona en el capítulo Descripción general de los complementos de Bootstrap , puede incluir bootstrap.js o bootstrap.min.js minificado .

Uso

Puede habilitar la eliminación de una alerta de las siguientes dos formas:

  • Via data attributes - Para descartar a través de la API de datos, simplemente agregue data-dismiss = "alert" a su botón de cierre para dar automáticamente una función de cierre de alerta.

<a class = "close" data-dismiss = "alert" href = "#" aria-hidden = "true">
   &times;
</a>

  • Via JavaScript - Para descartar a través de JavaScript, utilice la siguiente sintaxis -

$(".alert").alert()

Ejemplo

El siguiente ejemplo demuestra el uso del complemento de alerta mediante atributos de datos.

<div class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">
      &times;
   </a>
   
   <strong>Warning!</strong> There was a problem with your network connection.
</div>

Opciones

Aquí no hay opciones.

Métodos

Los siguientes son algunos métodos útiles para el complemento de alerta:

Método Descripción Ejemplo
.alerta() Este método envuelve todas las alertas con una funcionalidad cercana. 
$('#identifier').alert();

Close Method .alert ('cerrar')

 Para permitir que se cierren todas las alertas, agregue este método. 
$('#identifier').alert('close');
Para permitir que las alertas se animen cuando están cerradas, asegúrese de que tengan la .fade y .in clase ya aplicada a ellos.

Ejemplo

El siguiente ejemplo demuestra el uso de .alert() método -

<h3>Alert messages to demonstrate alert() method </h3>

<div id = "myAlert" class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Success!</strong> the result is successful.
</div>

<div id = "myAlert" class = "alert alert-warning">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Warning!</strong> There was a problem with your network connection.
</div>

<script type = "text/javascript">
   $(function(){
      $(".close").click(function(){
         $("#myAlert").alert();
      });
   });  
</script>

El siguiente ejemplo demuestra el uso de .alert('close') método -

<h3>Alert messages to demonstrate alert('close') method </h3>

<div id = "myAlert" class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Success!</strong> the result is successful.
</div>

<div id = "myAlert" class = "alert alert-warning">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Warning!</strong> There was a problem with your network connection.
</div>

<script type = "text/javascript">
   $(function(){
      $(".close").click(function(){
         $("#myAlert").alert('close');
      });
   });  
</script>

Pruebe este código usando el Try iteditor. Puede ver que la funcionalidad de cierre se aplica a todos los mensajes de alerta, es decir, cerrar cualquier mensaje de alerta, el resto de los mensajes de alerta también se cierra.

Eventos

La siguiente tabla enumera los eventos que funcionan con el complemento de alerta. Este evento puede usarse para conectarse a la función de alerta.

Evento Descripción Ejemplo
close.bs.alert Este evento se activa inmediatamente cuando se llama al método de instancia cercana . 
$('#myalert').bind('close.bs.alert', function () {
   // do something
})
alerta cerrada Este evento se activa cuando la alerta se ha cerrado (esperará a que se completen las transiciones CSS). 
$('#myalert').bind('closed.bs.alert', function () {
   // do something
})

Ejemplo

El siguiente ejemplo demuestra los eventos del complemento de alerta:

<div id = "myAlert" class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Success!</strong> the result is successful.
</div>

<script type = "text/javascript">
   $(function(){
      $("#myAlert").bind('closed.bs.alert', function () {
         alert("Alert message box is closed.");
      });
   });
</script>