Pubblicato il 04/07/12e aggiornato il

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://lh4.googleusercontent.com/-UYRwgsmtMyA/T_P4lPh0fNI/AAAAAAAAY7A/itM815cE_iY/s800/uccello-paradiso.jpg');"><img src="https://lh3.googleusercontent.com/-ROdkOgWvq3k/T_P6xqpF7XI/AAAAAAAAY7I/WcwKz11xZcg/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.




9 commenti :

  1. ciao!
    Vorrei chiederti una cosa riguardo a ciò. Sarebbe possibile fare aprire una finestra di popup ogni 5 ip diversi ad esempio? Se si potresti dirmi come fare? Grazie mille e complimenti

    RispondiElimina
    Risposte
    1. @Slash+-+-
      Su Blogger non si ha accesso al file manager e quindi non si possono gestire gli IP dei visitatori. Non credo si possa fare molto di più di quello mostrato in questo articolo.

      Elimina
  2. Per avere la email del visitatore magari con un gadget o solo per seguire come faccio per cortesia Ernesto?
    Grazie anticipatamente per la risposta e per i tuoi articoli preziosi!

    RispondiElimina
    Risposte
    1. @# Nel senso di creare un modulo in cui o visitatori possano registrarsi? Non credo esista un tale widget per Blogger. Potresti provare a usare il modulo generico di Google Drive per poi adattarlo alle tue esigenze. Ci dovrebbe essere anche il codice da implementare

      Elimina
  3. Buon pomeriggio Ernesto (e beato te che non hai sentito il terremoto!), ho una domanda - sempre dalla solita ignorante che sono: è possibile far aprire più popup contemporaneamente cliccando su una sola immagine? Ho provato a smanettare da sola ma non ci sono riuscita!

    RispondiElimina
    Risposte
    1. @# Non credo sia possibile e in ogni caso si incasina il layout

      Elimina
    2. Peccato, l'avevo visto in un sito, ma non era piattaforma blogger ed ero curiosa di sapere come funzionava :) Grazie mille lo stesso!

      Elimina
    3. @# Si possono però aprire più link con uno stesso click
      http://www.ideepercomputeredinternet.com/2012/09/link-schede-browser.html

      Elimina
  4. @# Sono curioso anche io. Linkami la pagina

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.