Alert javascript come non li avete mai visti

sweet alert

alert javascript

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.

[us_single_image image=”4992″ size=”medium_large” onclick=”lightbox”]

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.

BRUTTO ALERT!!!
SWEET ALERT!!!
SWEET2 ALERT!!!

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)

CSS

Un minimo di stile 🙂

.button {
    display: block;
    width: 160px;
    height: 25px;
    padding: 13px 36px 52px 22px;
    text-align: center;
    border-radius: 5px;
    color: white;
    font-weight: bold;
}
.buttonBrutto {
    background: #4E9CAF;
}
.buttonBello{
    background: cornflowerblue;
}

HTML

<a> mascherato da buttons

<a id="bruttoalert" class="button buttonBrutto" href="">BRUTTO ALERT!!!</a>

<a id="sweet" class="button buttonBello" href="#">SWEET ALERT!!!</a>

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