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 --> <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <!-- Bootstrap 5 --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script> <!-- Font Awesome --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"> <!-- stackAlert Plugin --> <script src="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 tempo position: '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