martedì 2 marzo 2010

creare un popup in linguaggio javascript


I PopUp sono finestre che si aprono o all'apertura-chiusura di determinate pagine web in maniera automatica, oppure dopo aver schiacciato qualche link.

Per inserire una finestra di popup in una pagina web si può ricorrere all'inserimento di un codice javascript nel codice html della propria pagina.



Vediamo come inserire una finestra di pop-up che si apra automaticamente all'apertura di una nostra pagina.

Tra i tag <head> e </head> del codice html (vedi qui a tal proposito) inserire un codice di questo tipo:



CODICE
<script LANGUAGE="JavaScript"> <!-- Begin function popUp(URL) { day = new Date(); id = day.getTime(); eval("page" + id + " = window.open(URL, '" + id + "', 'scrollbars=1,toolbar=1,location=1,statusbar=1,menubar=1,resizable=1,width=400,height=700,left = 300,top = 0');"); } // End --> </script>


La funzione scrollbars=1 indica che la finestrà avrà le barre di scorrimento. Se impostato a 0 no.

La funzione toolbar=1 indica che la finestra di popup avrà la barra dei bottoni (aggiorna, cancella ecc..) del browser. Se si imposta toolbar=0 non ci sarà.

Location=1 analogamente permette la presenza della barra dei collegamenti, 0 se disabilitata.

Statusbar=1 per la barra di stato, Statusbar=0 se disabilitata.

Menubar=1 per lasciare nella finestra di popup la barra dei menu del browser (File, Modifica ecc...).

Resizable=1 permette di rimpicciolire la finestra di popup, =0 se non volete permetterne il ridimensionamento.

Width e height sono rispettivamente i valori, in pixel, di larghezza e altezza della finestra pop-up.

Left e top sono le distanze del popup dal margine sinistro e dall'alto dello schermo, qui ho usato questi valori per centrare il popup, se impostati a zero la finestra comparirà sulla sinistra dello schermo.



Oltre a inserire questo codice tra i tag <head>, dovrete inserire lo script di richiamo nel codice html, tra i tag <body> e </body>.



CODICE
<body onLoad="javascript:popUp('http://indirizzo_pagina_popup')">


Naturalmente al posto di indirizzo_pagina_popup dovrete inserire l'indirizzo della pagina che volete si apra come popup all'apertura della pagina in cui inserite lo script.

La funzione onLoad permette appunto la comparsa del popup in fase di caricamento pagina. E' possibile sostituirla con onUnload per fare apparire il popup invece quando la pagina viene chiusa.

Se invece si vuole che il popup sia generato non automaticamente all'apertura della pagina web ma quando si clicca un link, allora il codice da inserire tra i tag <body> sarà di questo tipo:



CODICE
<a HREF="javascript:popUp('http://indirizzo_pagina_popup')">Clicca qui per aprire la finestra popup


Per finire, se si vuole che il popup si apra in seguito al clic su un bottone (di quelli che si trovano dopo i form) allora il codice tra i tag <body> dovrà apparire così:



CODICE
<form> <input type=button value="Clicca qui per aprire il popup!!" onClick="javascript:popUp('http://indirizzo_pagina_popup')"> </form>


Mi sembra superfluo dire che al posto di 'Clicca qui per aprire....' potete inserirci il testo che vi pare.

Tutorial by www.guideperpc.com/Webmaster_creare_popup.htm