2 aprile 2009

22 commenti Condividi il post Facebook Twitter Google+

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:


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!



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

22 commenti

  1. wow mi hai preso proprio in parola! appena ho tempo lo faccio:D grazie mille!

    RispondiElimina
  2. @gianpy1988playlist: faccio il possibile per rispondere alle richieste dei miei lettori ;)

    RispondiElimina
  3. Grazie per l'informazione, potrebbe essermi utile...

    RispondiElimina
  4. Molto interessante questa modifica..già mi viene qualche idea ;D

    RispondiElimina
  5. I tuoi post sono sempre molto utili e tu sei sempre molto gentile con i tuoi lettori. Ciao, Martin

    RispondiElimina
  6. @Den, Vinnie e Martin: grazie! Se avete qualche richiesta... ditemi pure, vi aiuto volentieri!

    RispondiElimina
  7. @Gollum: mi piace tantissimo lo sfondo che cambia colore!

    RispondiElimina
  8. Brava IOLE...complimenti.

    Rudin

    RispondiElimina
  9. cara Iole devo ammettere ke sei diventata un vero genio del blog.
    Leggo i tuoi post ma faccio fatica a mettere in pratica cose x me poco comprensibili.
    A monte c'è il rifiuto di toccare l'html.Sono ossessionata dalla paura di creare pasticci e così preferisco non fare modifike.
    Quando avrò tempo farò un blog di prova x dilettarmi con i tuoi consigli.
    un bacio
    Lella

    RispondiElimina
  10. @Rudin: grazie!
    @Lella: anch'io prima di fare qualsiasi modifica al blog mi esercito su quello di prova.

    RispondiElimina
  11. e per mettere solo il pulsante clicca qui per... senza che si riapra il contenuto della stessa pagina come si fa?

    RispondiElimina
  12. @gianpy1988playlist: non ho capito bene cosa vuoi fare... contattami via email o via chat che ne parliamo!

    RispondiElimina
  13. Eccomi con una nuova domanda?
    Si possono importare nuovi font su blogger?quelli che ci sono sono proprio pochi e brutti ... sarebbe carino poter caricare quelli che sono riuscita a scaricarmi per word!
    Pensi sia possibile?
    un bacio e buona serata!

    Giulia

    RispondiElimina
  14. @Giugiu': sei la seconda persona che me lo chiede... mi informerò e se è possibile vi scriverò un post!

    RispondiElimina
  15. Abbiamo una proposta interessante per te

    RispondiElimina
  16. Ciao Iole, volevo segnalarti un programma con cui creare dei menù molto elaborati in flash che probabilmente conosci già però ci vuole tanto tempo per realizzarne uno ed io ne ho creato uno da inserire nella mia nuova HomePage (se ti ricordi volevo inserirla quando si apriva il mio blog , ma ancora non so come fare) perchè gli esempi non sono molto esaurienti sul sito. Il link alla mia home page con il menu è http://bud-terence.blogspot.com. Ah, un'altra cosa, come hai creato la tua scritta IOLE in alto nella sidebar con il riflesso d'acqua che si muove? Grazie e buona Pasqua!!! :)

    RispondiElimina
  17. @Alla Scoperta: che proposta?
    @BudTerence: se ti serve aiuto contattami pure! La scritta IOLE con il riflesso d'acqua l'ho fatta io in flash così anche la scritta VITAIE per una mia amica e l'header per il blog di un mio amico.

    RispondiElimina
  18. Dove devo inserire per esempio questo codice:
    =popup e il resto del codice dove lo devo inserire?

    RispondiElimina
  19. @Manager: trovi tutte le istruzioni nel post. Non sono abbastanza chiare?

    RispondiElimina
  20. Ciao,io sto usando un codice javascript che ho inserito in un gadget, che mi serviva per far aprire un pop-up con una immagine all'apertura del sito: solo che il pop-up si apre ogni volta che clicco su ogni pagina del sito; vorrei che si aprisse solo in home-page; come fare? Grazie! (se vuoi ti mando il codice)

    RispondiElimina
  21. @Nic: inviami il codice così gli do un'occhiata e ti faccio sapere.

    RispondiElimina

Se volete sostenere il mio blog, visitate questi siti. Grazie!
Licenza Creative Commons This blog by Iole is licensed under a Attribution-NonCommercial-NoDerivs 3.0 Unported License.
Copyright © 2008- iolecal.blogspot.it|Design by Iole|Privacy Policy