Alert ed Avvisi con Bootstrap

Bootstrap permette di generare in modo molto semplici delle finestre di messaggio (alert) da utilizzare per comunicare agi utenti delle informazioni di vario tipo come, ad esempio, il successo di un’operazione o il verificarsi di un errore.

Questi messaggi vengono realizzati grazie alla classe alert che va necessariamente accompagnata da una delle classi di formattazione previste per questo elemento che funzionano con lo stesso principio già esposto per altri elementi come i pulsanti e le etichette.

<div class="alert alert-success">Ottimo! Procedura eseguita con successo </div>

le classi di formattazione disponibili per gli alert sono quattro:

• alert-success – da utilizzare per messaggi di conferma; genera un box di colore verde.
• alert-info – da utilizzare per messaggi d’informazione; genera un box di colore azzurro.
• alert-warning – da utilizzare per messaggi di attenzione; genera un box di colore giallo.
• alert-danger – da utilizzare per messaggi di errore; genera un box di colore rosso.

Link all’interno di alert

Se un alert contiene un link, è possibile assegnare al link la classe .alert-link in modo che il link sia formattato in modo da adeguarsi alla formattazione dell’alert stesso.

<div class="alert alert-success">
  Ottimo! Procedura eseguita con successo <br/>
  Fai clic <a href="#" class="alert-link">qui</a> per maggiori informazioni
</div>

Questo alert non è altro che una area evidenziata della pagina. L’utente non può chiuderlo nè interagire con esso.

Alert richiudibili

Realizzato come abbiamo visto fin ora, un alert permette di evidenziare degli elementi e mostrare messaggi, ma rimane sempre visibile nella pagina e non è possibile nasconderlo. Però, in una pagina Internet, può essere utile che l’utente, dopo aver letto il messaggio, possa nasconderlo.

Perchè una alert sia richiudibile, basta che gli sia assegnata la classe alert-dismissable. Sarà poi necessario inserire al suo interno un pulsante che permette di chiudere l’alert stesso. Questo pulsante deve avere l’attributo data-dismiss="alert". Perchè possa avere l’aspetto del classico pulsante di chiusura a croce, gli potrete assegnare la classe close.

<div class="alert alert-dismissable alert-success">
  Ottimo! Procedura eseguita con successo
  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
</div>

Controllare l’alert con Javascript

Oltre che come abbiamo visto fin qui, è possibile rendere richiudibile un alert via codice, grazie al metodo

$().alert();

Per chiudere una finestra alert possiamo utilizzare questo codice Javascript:

$('#mioalert').alert('close');

Proviamo, allora a riscrivere il codice che genera l’alert visto sopra, controllandolo via Javascript.

<div class="alert alert-success fade in" id="mioAlert">
  Ottimo! Procedura eseguita con successo
  <button id="close" type="button" class="close" aria-hidden="true">&times;</button>
</div>

<script>
$(function() {
  $('#close').click(function() {
    $('#mioAlert').alert('close');
  });
});
</script>

Notate che abbiamo assegnato al nostro alert le classi fade e in. Così facendo, l’alert viene chiuso con un effetto dissolvenza.

Eventi

Il metodo alert() di Bootstrap dispone di due eventi che permettono di eseguire delle operazioni in momenti specifici, appena prima o appena dopo la chiusura dell’alert stesso:

• close.bs.alert: si verifica appena prima della chiusura dell’alert;
• closed.bs.alert: si verifica appena dopo la chiusura dell’alter;

Potete usare questi eventi con la sintassi che segue

$('#mioAlert').bind('closed.bs.alert', function () {
  // azioni da eseguire
})