Come inserire una finestra popup in un articolo.

Come inserire delle finestre popup in un articolo di Blogger o in una qualsiasi altra pagina web configurandone le dimensioni e la posizione di apertura.

Le finestre popup non sono altro che delle finestre secondarie che si aprono in una pagina web in due modi ben distinti. Ci sono quelle che si visualizzano in automatico e quelle che invece hanno bisogno di una azione da parte del visitatore per essere aperte.

Vediamo come inserire una finestra popup del secondo tipo in un articolo di Blogger ma anche in un'altra qualsiasi pagina web. L'obiettivo è quello di avere visibili nel post un testo di ancoraggio o una immagine che, nel caso un navigatore ci cliccasse sopra, aprirebbe nella stessa pagina una nuova finestra di dimensioni e di posizione predeterminate. Si tratta in sostanza di incollare un codice nell'Editor di Blogger o in Windows Live Writer con Modalità HTML. Si possono inserire più finestre popup per ogni pagina. Basta avere l'accortezza di modificare il nome della funzione.

Il codice della finestra popup per un normale testo ha questa struttura

<script type="text/javascript">
function Popup1(url) {
popupWindow = window.open(  url,'popUpWindow','height=600,width=800,left=50,top=100,resizable=no,scrollbars=no,toolbar=no,menubar=no,location=no,directories=no,status=no')
}
</script>
<a href="javascript:Popup1('URL della pagina');">Apri il popup</a>

Dove 600 e 800 rappresentano rispettivamente l'altezza e la larghezza della finestra popup; left=50 e top=100 è la posizione nel layout in cui si aprirà la finestra. In questo caso si visualizzerà a 50 pixel dalla sinistra e a 100 pixel dalla parte alta. All'interno della finestra popup si vedrà la pagina web di cui si è inserito l'indirizzo al posto di URL della pagina. Per concludere Apri il popup è il testo che visualizzeranno i visitatori del sito.

Se si vuole personalizzare il testo di ancoraggio del popup, il codice potrebbe diventare

<script type="text/javascript">
function Popup2(url) {
popupWindow = window.open(  url,'popUpWindow','height=600,width=800,left=200,top=150,resizable=no,scrollbars=no,toolbar=no,menubar=no,location=no,directories=no,status=no')
}
</script>
<a href="javascript:Popup2('URL della pagina');"><font style="color:#940F04; font-size:120%; font-weight:bold;">Visualizza popup</font></a>

dove i parametri in rosso hanno lo stesso significato di prima. E' stata scelta la funzione Popup2 invece di Popup1 per poter inserire due finestre popup nella stessa pagina. I parametri in verde servono per personalizzare la scritta dell'anchor text e ne possono essere inseriti anche di altri.

Se vogliamo mostrare una finestra popup quando si clicca su una immagine invece che su un testo, il codice allora diventa simile a questo

<script type="text/javascript">
function Popup3(url) {
popupWindow = window.open(  url,'popUpWindow','height=600,width=800,left=200,top=100,resizable=no,scrollbars=no,toolbar=no,menubar=no,location=no,directories=no,status=no')
}
</script>
<a href="javascript:Popup3('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBn-sqVvIqDnLZ8Vba7ESVcBph4KI4ewWQuvNfvHfZ1O5k4zHyNOGi5fs3cF2Se6RwTxOivRtzsf91cN5PddkAhgWnOlJn7dgHp7XS154yPl2HnxmMD0DYnYGKX347ftOvAoezj0PKQ2ni/s800/uccello-paradiso.jpg');"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiejk_vJuqRCzanb8U3UECzct2TB1p6vzlNvLm444cgf4vf-DZK2ALLBInyLq3iocbfU8dFDTgdqLRrj8uBBG4Gp254MuZMtYxLnmo1cptRwdtzFhaQLHrWbPjw687pdHdZPwjvD4C5fNrX/s190/apri-popup.png" alt="popup"/></a>

dove a titolo di esempio ho inserito sia l'URL della immagine da visualizzare nel post, colorato di viola, sia l'URL della pagina web da visualizzare nella finestra, colorato di rosso, che in questo caso si riferisce proprio a un URL di una foto. Concludo ricordando che i parametri

resizable=no,scrollbars=no,toolbar=no,menubar=no,location=no,directories=no,status=no

hanno tutti una loro funzione che può essere attivata mettendo yes al posto di no. Chi vuole approfondire l'argomento può leggersi le caratteristiche delle finestre personalizzabili nella Guida Javascript.