Sostituisci le caselle di avviso JavaScript con questa alternativa reattiva

Popup di avviso JavaScript sono detestati da quasi tutti. Forzano la tua attenzione e superano il browser, quindi devi chiuderli prima di poter interagire con la pagina.

Nell'era moderna, possiamo fare meglio di caselle di avviso JavaScript. SweetAlert2 è probabilmente la soluzione migliore.

È un Script pop-up con JavaScript quello è progettato per essere pienamente reattivo e supportare l'accessibilità per tutti gli utenti.

Naturalmente, è anche open source e liberamente disponibile su GitHub se vuoi scavare nel codice.

Ma il vero tesoro è la demo sulla pagina principale di SweetAlert. esso offre un confronto diretto tra la casella di avviso JavaScript originale e il messaggio SweetAlert2.

Ciò che è divertente è che i frammenti di codice non sembrano una gran differenza. Puoi eseguire SweetAlert2 con una riga di codice proprio come un tipico avviso JavaScript, anche se quella linea potrebbe essere più lunga al confronto.

Con SweetAlert, tu avere più controllo sullo stile della casella popup, l'animazione, i colori dei pulsanti e gli stili di testo. Puoi persino incorporare immagini o video nella casella di avviso.

Tuttavia, la caratteristica migliore in assoluto è che SweetAlert2 non superare l'intero browser. Se si esegue un pop-up SweetAlert2 lo farà visualizza solo su quella scheda, quindi, anche se l'utente sta navigando in un altro sito, non verrà indirizzato in modo forzato alla scheda solo perché è comparso un avviso.

Questo alla fine aumenta il coinvolgimento degli utenti perché le persone non vengono allontanate a causa delle oscure pratiche UX.

Puoi imposta i timer di chiusura automatica, conferma / rifiuta i pulsanti, e persino personalizzare l'animazione utilizzando librerie di terze parti come Animate.css.

Se c'è qualche script da usare al posto del tipico avviso JavaScript deve essere SweetAlert2. Questa cosa è totalmente gratuito, open-source, e offre un sacco di opzioni personalizzate che avrà ogni sviluppatore web che sorride da un orecchio all'altro.

Controlla il sito principale per saperne di più e vedere alcuni esempi dal vivo. È inoltre possibile sfogliare il repository GitHub se si desidera vedere i file e controllare i log di rilascio.