Esempi di finestre popup

20 marzo 2006

Le popup sono finestre del browser aperte mediante un JavaScript che può agire sul loro aspetto e su alcune sue componenti, come la barra di stato, la barra dei menu, la barra degli strumenti, la barra di scorrimento, sulle sue dimensioni e sul posizionamento assoluto nell’area dello schermo.

Normalmente in HTML possiamo aprire la pagina a cui punta un link in un’altra finestra senza agire sulle componenti elencate, semplicemente aggiungendo l’attributo target="_blank" all’interno dei tag <a> o <area>.

Per capire cosa è in grado di fare JavaScript la miglior cosa da fare è vedere un primo semplice esempio di finestra aperta in modalità popup.

Primo esempio di finestra popup

Il codice per ottenere questo effetto è di una semplicità unica, si ricorre al metodo open()dell’oggetto window, al cui interno vanno passati dei parametri. Prima di spezzettare il codice per esaminarlo vediamo lo script nella sua integrità:

<script type="text/javascript">
<!--

var stile = "top=10, left=10, width=250, height=200, status=no, menubar=no, toolbar=no scrollbars=no";

function Popup(apri) 
{
  window.open(apri, "", stile);
}
//-->
</script>

Abbiamo creato la funzione popup() al cui interno abbiamo passato un parametro, apri, che ritroviamo nella riga di sotto come parametro nella funzione window.open(), dove ci serve per indicare il link alla pagina che apparirà nella nuova finestra:

<a href="javascript:Popup('mioFile.htm')">Apri la popup</a>

Come si vede abbiamo impostato alcuni parametri di stile passando la variabile stile al metodo open(). Anche se risulteranno di certo chiari a chiunque mastichi un minimo di HTML, riepiloghiamo i parametri principali:

ParametroValoriDescrizione
top, leftinterisono le coordinate dello schermo in cui visualizziare la popup, rispettivamente le distanze dal lato superiore e da quello sinistro dello schermo (in pixel)
width, heightinterilarghezza ed altezza della nuova finestra espresse in pixel
statusyes/noattiva/disattiva la barra di stato nella popup
menubaryes/noattiva/disattiva la barra dei menu nella popup
toolbaryes/noattiva/disattiva le toolbar nella nuova finestra
scrollbarsyes/noattiva/disattiva lo scrolling della popup. Se disattiviamo lo scrolling ricordiamoci di dimensionare per bene i contenuti, l’utente potrebbe non poter scrollare e visualizzarli tutti

Vediamo ora come ottenere una popup centrata nello schermo a qualunque risoluzione.

Per approfondire

Se vuoi aggiornamenti su Esempi di finestre popup inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Esempi di finestre popup

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy