Plugin jQuery standalone per alert impilati con Bootstrap 5 e Font Awesome.
stackAlert è un semplice plugin che consente di mostrare messaggi di notifica impilati, con posizionamento fisso nella pagina, chiusura automatica o manuale e un look moderno con animazioni ed icone. Tutto incluso in un solo file .js, senza necessità di caricare CSS separati.
- ✅ Compatibile con jQuery 3+ e Bootstrap 5
- ✅ Include automaticamente gli stili CSS "pro" al primo utilizzo
- ✅ Supporta Font Awesome per icone visive
- ✅ Posizionamento configurabile:
top-right,bottom-right,top-left,bottom-left,top-center,bottom-center - ✅ Chiusura automatica configurabile, oppure solo manuale
- ✅ Stack verticale degli alert (non sovrapposti)
- ✅ Design responsive e leggero
Assicurati di includere jQuery, Bootstrap 5 e Font Awesome prima del plugin:
<!-- jQuery --><scriptsrc="https://code.jquery.com/jquery-3.7.1.min.js"></script><!-- Bootstrap 5 --><linkhref="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"><scriptsrc="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script><!-- Font Awesome --><linkrel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"><!-- stackAlert Plugin --><scriptsrc="https://cdn.jsdelivr.net/gh/FVLogika/stackAlert/stackAlert.min.js"></script>$.fn.stackAlert({message: 'Operazione completata con successo!',type: 'success',timeout: 4000,position: 'top-right'});// oppure$.fn.stackAlert('Operazione completata con successo!','success',4000,'top-right');$.fn.stackAlert({message: 'Errore irreversibile!',type: 'danger',timeout: 0,// senza chiusura a tempoposition: 'bottom-left'});// oppure$.fn.stackAlert('Errore irreversibile!','danger',0,'bottom-left');| Tipo | Colore | Icona Font Awesome |
|---|---|---|
info | blu chiaro | fa-circle-info |
success | verde | fa-circle-check |
warning | arancione | fa-triangle-exclamation |
danger | rosso | fa-circle-exclamation |
primary | blu | fa-star |
secondary | grigio | fa-circle |
light | gr chiaro | fa-sun |
dark | gr scuro | fa-moon |
Tutto il codice è contenuto in un solo file JavaScript (stackAlert.js) che:
- Se necessario inietta lo stile automaticamente nel
<head>della pagina - Gestisce la creazione del contenitore e degli alert
- Applica le animazioni, le icone e il comportamento di chiusura
- È completamente standalone e non richiede dipendenze esterne oltre a jQuery, Bootstrap e Font Awesome
$.fn.stackAlert({message: 'Primo messaggio!',type: 'info',timeout: 3000});$.fn.stackAlert({message: 'Secondo messaggio!',type: 'success',timeout: 5000});$.fn.stackAlert({message: 'Terzo alert!',type: 'warning',timeout: 7000});// oppure$.fn.stackAlert('Primo messaggio!','info',3000);$.fn.stackAlert('Secondo messaggio!','success',5000);$.fn.stackAlert('Terzo alert!','warning',7000);$.fn.stackAlert({message: 'Notifica in basso a destra',position: 'bottom-right'});// oppure$.fn.stackAlert('Notifica in basso a destra','info',5000,'bottom-right');- Puoi usare questo plugin per messaggi di conferma, errori, notifiche temporanee o avvisi persistenti
- Essendo basato su Bootstrap, puoi facilmente personalizzare il look usando le classi di Bootstrap (
alert-*) - Il plugin può essere facilmente esteso per supportare icone personalizzate, callback o stacking orizzontale
MIT - uso libero con attribuzione. Vedi LICENSE nel repository.
Creato con cura da FVLogika