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:
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>.
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:
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ì:
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
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
Tags
javascript
Ciao ! Prima di tutto mi complimento con te per il blog ,sei uno popolare ;) seconda cosa ti vorrei porre un po' di domande : io ho seguito la tua guida per il pop up ma a me non si apre niente ! Riesco a fare solo pop up in apertura da link , ma ho notato che tu hai 1 pop-up in apertura con il blog . il problema me lo dà l'xml nel tag body . Prima devo aggiungere un ' poi devo mettere un / , e alla fine un casino :S
RispondiEliminano, il popup di apertura sul blog non c'entra niente con la guida del popup in javascript. Poi a dire la verità la guida fu collaudata su forumfree. Su Blogger, ovviamente, c'è il gadget HTML/Javascript,
RispondiEliminaSapresti aiutarmi a mettere un pop-up o un pop-under nel blog blogspot ( Blogger) ?
RispondiEliminaSu blogger non c'è bisogno di seguire tutta la guida, perchè ti basta inserire i codici in un gadget HTML/Javascript
RispondiEliminaSono andato su Design --> elementi pagina -->aggiungi gadget e ho inserito i codici che qui non mi fa inserire "Non è possibile accettare il codice Non sono consentiti PHP, ASP e altri script lato server. specificato."
RispondiEliminaDopo che salvo e clicco su visualizza blog non succede niente , aggiorno la pagina e ancora niente , nessun pop - up . oltre tutto nel gadget è scomparso il tag body !
se ti dice errore, vuol dire che non accetta il codice e quindi non salva le modifiche.
RispondiEliminaIo ho messo il codice da te fornito con al posto di URL l'url del website da aprire .
RispondiEliminapoi ho messo il body come lo hai dato tu mettendo l'indirizzo della pagina da aprire !
salvo il gadget ma non succede nulla !
Come fai a far comparire la pagina web dal lato sinistro del blog ?
RispondiEliminail popup che vedi nel blog è un codice javascript automatizzato, non l'ho impostato io.
RispondiElimina