Alert javascript come non li avete mai visti

A BEAUTIFUL, RESPONSIVE, CUSTOMIZABLE, ACCESSIBLE (WAI-ARIA) REPLACEMENT FOR JAVASCRIPT’S POPUP BOXES

ZERO DEPENDENCIES

Questo è quello che promette ed è proprio quello che fa questa libreria, la quale ci permette di rendere i messaggi di alert javascript molto più belli.

A questo link potete Sweet Alert trovare la “sweet” libreria con tutta la documentazione. Sotto invece vi mostreremo come implementarla in wordpress in maniera semplice veloce e divertente.

Lo screenshot della parte backoffice di wordpress mostra cosa abbiamo utilizzato per l’esempio dei pulsanti. Utilizzando due blocchi funzionali del plugin Visual Composer abbiamo implementato i pulsanti con un minimo di style 😉 e la parte javascript, inserendo cosi a “crudo” la libreria jQuery e la SweetAlert utilizzando le CDN che abbiamo trovato sui rispettivi siti web.

Ed ecco il risultato, sotto troverete anche i blocchi di codice. Come vedete abbiamo messo due pulsanti per lo sweet alert (vi assicuriamo che ci sono un’infinità di opzioni veramente funzionali ed utili) e poi il tristissimo (ma tante volte utile) alert di base.

Javascript Code – in ordine:

1. Inserimento jQuery
2. Inserimento Sweet Library
3. Codice jQuery per attivare gli alerts alla pressione dei vari buttons (che nella realtà sono tag a)

<script
  src="https://code.jquery.com/jquery-3.2.1.js"
  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
  crossorigin="anonymous"></script>
<script src="https://unpkg.com/sweetalert2@7.0.9/dist/sweetalert2.all.js"></script>
<script type="text/javascript">
jQuery(function( $ ) {
jQuery("#bruttoalert").click(function(event) {
event.preventDefault();
  console.log("Mamma quanto so brutto!!!! hhiiiiiiii");
alert("Mamma quanto so brutto!!!! hhiiiiiiii");
});
jQuery("#sweet").click(function(event){
event.preventDefault();
console.log("Sweeeeeeeetttttt");
swal('Any fool can use a computer');
});
jQuery("#sweet2").click(function(event){
console.log("Sweeeeeeeetttttt");
event.preventDefault();
swal(
  'The Internet?',
  'That thing is still around?',
  'question'
)
});
});
</script>

Brutto and Sweet Button Code (HTML e CSS)

In conclusione abbiamo trovato questa libreria davvero interessante ed utile. In alcuni casi mettere degli alert javascript cosi “sweet” può dare al cliente una bella impressione e permetterci di continuare il nostro lavoro senza complicarci la vita.

CFadvanced Staff