Come aprire una finestra popup dal blog

Qualche giorno fa Gianpy mi ha chiesto se è possibile aprire una finestra popup da Blogger e visualizzare in essa un'immagine o un testo, cliccando su un pulsante o un link nel blog.

Ad esempio cliccando su questo link si apre un popup con all'interno il contenuto del post racchiuso nell'area con il bordo:

Foto by: Amsis

Vediamo ora il codice javascript da inserire nel template del blog e la sintassi da utilizzare per visualizzare il popup.

Prima della riga </head> dovrete inserire questo codice:

<script>
function openPopup(divId,W,H) {
if(W == undefined || H == undefined) {
W=800;
H=600;
}
var html = document.getElementById(divId).innerHTML;
var newWindow = window.open(&quot;&quot;,&quot;&quot;,&quot;top=100,left=200,width=&quot; +W+&quot;,height=&quot;+H+&quot;,scrollbars=yes,status=no,menubar=no,toolbar=no,locations=no&quot;);
newWindow.document.open();
newWindow.document.write(html);
newWindow.document.close();
}
</script>

Per aprire un popup cliccando su un link dovrete scrivere:

<a onclick="openPopup('id','400','300')">link</a>

dove id rappresenta l'id del div il cui contenuto deve essere visualizzato nel popup mentre i due valori numerici 400 e 300 rappresentano le dimensioni della finestra popup. Se le due dimensioni non vengono specificate di default sono 800x600.

Cos'è l'id di un div e a cosa serve???

Nel mio post, l'html del div con il bordo è il seguente:

<div id="popup" style="border: 3px double rgb(247, 155, 173); margin: 0pt auto; padding: 15px; width: 260px; height: 200px; text-align: center;"><img src="http://farm1.static.flickr.com/167/480208982_838f0facb4_m.jpg" alt="" />
Foto by: <a href="http://www.flickr.com/photos/amsis/480208982/" target="_blank">Amsis</a></div>

quindi il suo id è popup e serve alla funzione openPopup per prendere il codice html presente al suo interno per poi visualizzarlo nel popup.

Quindi basta poi scrivere:

<a onclick="openPopup('popup',300,300);">link</a>

per visualizzare il popup con il contenuto del div.

La funzione openPopup può essere associata all'evento onclick di un link ma anche di un'immagine . In questo caso la sintassi è:

<img src="url" onclick="openPopup('popup',300,300);"/>

Spero di essere stata chiara... per ogni dubbio o chiarimento contattatemi pure o lasciatemi un commento!

Post correlato:
Come aprire i link in una nuova pagina o in una finestra popup

Newsletter by follow.it

Copyright © Iole - Non è consentito ripubblicare, anche solo in parte, i post di questo blog senza l'esplicito consenso dell'autrice.