In questa guida vi spiegherò come installare e utilizzare una funzione che vi permetterà di far apparire sulla vostra pagina un box simile a quello della funzione alert() di javascript.
Panoramica Generale
Questa accetta 3 valori:
- Titolo: testo da far apparire nella parte superiore del box
- Messaggio: testo da far apparire nella parte inferiore del box
- Rediject: questo valore è opzionale, se impostato invierà l’utente alla pagina web inserita come valore, come per esempio http://google.it
Per utilizzare questa funzione dovrete includere 2 file, uno javascript e uno css, il primo gestirà il tutto, mentre il secondo serve solo per dare uno stile al nostro box, potete modificarlo a vostro piacimento.
Il file css potrebbe fare conflitto con alcuni stili del vostro file di stile predefinito, è preferibile fare un controllo prima di utilizzarlo.
<link href="_alert.css" media="screen" rel="stylesheet" type="text/css" /> <!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>--> <script src="_alert.js" ></script>
Nel codice troverete racchiusa tra commento la libreria jquery necessaria per il funzionamento dello script, togliete il commento nel caso jquery non sia già presente nel vostro codice.
Il grosso del lavoro è fatto, ora per richiamare la funzione non dobbiamo far altro che scrivere _alert(titolo, messaggio, rediject); ricordo che rediject non è obblicatorio.
Esempio di utilizzo
<script language="javascript">
_alert("Iscrizione","Grazie per esserti iscritto al nostro sito.<br />Riceverai una mail per confermare il tuo account")
</script>
Conclusioni e Download
Qua sotto troverete un esempio e il download dello script.
[button link=”http://www.targetweb.it/tutorial/2014/_alert/demo.html” color=”blue” target=”blank” size=”large”]Demo[/button] [button link=”http://www.targetweb.it/download/2014/_alert-targetwebit.rar” color=”blue” target=”blank” size=”large”]Download[/button]
Questo articolo ti è stato utile? Condividilo sui tuoi social network preferiti!
Ciao, si può fare qualcosa di simile ma facendo in modo che si apra da solo all’aertura della pagina (dopo un certo numero di secondi)?
Grazie
Ciao, ho utilizzato questo script in un form di registrazione e mi è stato molto utile, ho un problema che non riesco a risolvere probabilmente perchè non trovo la giusta sintassi per inserire la funzione.
Quando invio il form alla pagina che si occupa di inserire i dati in un db mysql tutto funziona ma il form non si resetta, conserva i valori precedenti. Credi sia possibile inserire la funzione in questo script ?
bel popup, c’è possibilità di utilizzarlo in responsive?
Utilizzandolo così non si adatta
Grazie
Ciao ti basta impostare le tue media queries in base ai breakpoint che usi attualmente sul tuo progetto 😉 In linea generale dovrebbe mastare dare un max-width:100% al container princiapale del popup
Gia provato, inserito ma nulla, puoi indicarmi specificamente come intendi tu?grazie