Come creare finestre popup

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: window.open()

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:

Parametro	Valori	Descrizione
top, left	interi	sono le coordinate dello schermo in cui visualizziare la popup, rispettivamente le distanze dal lato superiore e da quello sinistro dello schermo (in pixel)
width, height	interi	larghezza ed altezza della nuova finestra espresse in pixel
status	yes/no	attiva/disattiva la barra di stato nella popup
menubar	yes/no	attiva/disattiva la barra dei menu nella popup
toolbar	yes/no	attiva/disattiva le toolbar nella nuova finestra
scrollbars	yes/no	attiva/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

• Le finestre Pop-up - Guida rimozione malware
• Popup con fumetto - Script JavaScript

Aprire una finestra popup centrata a qualsiasi risoluzione

Nel caso precedentemente preso in esame abbiamo aperto una popup impostando un posizionamento assoluto grazie ai parametri top=10, left=10 nella variabile stile, quello che ci proponiamo di fare ora è aprire una finestra popup centrata a qualsiasi risoluzione.

Ecco un esempio esplicativo di finestra popup centrata.

Anche in questo caso, prima di addentrarci nelle spiegazioni particolarizzate del codice, vediamolo nella sua integrità:

<script type="text/javascript">
<!--
function PopupCentrata()
{
var w = 400;
var h = 250;
var l = Math.floor((screen.width-w)/2);
var t = Math.floor((screen.height-h)/2);
window.open("mioFile.htm","","width=" + w + ",height=" + h + ",top=" + t + ",left=" + l);
}
//-->
</script>

semplicissimo il richiamo HTML a questa funzione:

<a href="javascript:PopupCentrata()">Apri la popup</a>

Definiamo quattro variabili, w (larghezza della popup), h (altezza della popup), t (posizionamento della popup dall'alto e dal basso) e l (posizionamento della popup dai lati).

Mentre le prime due variabili sono solo dei "numerici stringa", le seconde due eseguono delle operazioni matematiche, per chiarezza riporto il codice:

var l = Math.floor((screen.width-w)/2);
var t = Math.floor((screen.height-h)/2);

Il metodo floor() dell'oggetto Math restituisce l'intero numerico inferiore più vicino al valore, mentre le proprietà width e height di screen (che a sua volta, anche se non menzionato, fa parte dell'oggetto window), restituisce il valore numerico rispettivamente della larghezza e dell'altezza dello schermo, valutando la risoluzione video impostata.

In questo caso utilizziamo la funzione Math.floor() per sottrarre dalle dimensioni della risoluzione video il valore di larghezza (nel primo caso) e dividiamo il risultato per due, in modo che, eseguendo questa operazione sia per la larghezza che per l'altezza, otteniamo la centratura della finestra rispetto allo schermo a qualsiasi risoluzione.

Vediamo ora come inserire il testo nella popup.

Per approfondire

• Popup centrate con Javascript
• Gli oggetti - Guida JavaScript per esempi
• Cos'è lo scope - Guida Javascript: tecniche essenziali

Aprire una finestra popup generando il contenuto dinamicamente

Sulla scorta del primo esempio riportato, vediamo come aprire una popup senza includervi un file esterno, ma generando il codice direttamente dallo script della pagina di apertura.

Come abbiamo fatto per i primi due esempi, anche in questo caso vediamo il codice intero e che sarà successivamente commentato:

<script type="text/javascript">
<!--
function autoPopup() {
var stili = "top=10, left=10, width=400, height=250, status=no, menubar=no, toolbar=no scrollbars=no";
var testo = window.open("", "", stili);
testo.document.write("<html>n");
testo.document.write(" <head>n");
testo.document.write(" <title>HTML.it - il portale chi fa Web</title>n");
testo.document.write(" <basefont size=2 face=Tahoma>n");
testo.document.write(" </head>n");
testo.document.write("<body topmargin=50>n");
testo.document.write("<div align=center><b>Popup generata dinamicamente</a></div>n");
testo.document.write("</body>n");
testo.document.write("</html>");
}
//-->
</script>

il richiamo HTML è il solito:

<a href="javascript:autoPopup()">Apri la popup</a>

Vediamo con un esempio cosa abbiamo generato.

Abbiamo creato la variabile testo a cui abbiamo associato l'oggetto ritornato dal metodo window.open(), questo oggetto è una window, quindi possiamo inserire (dinamicamente) il codice al suo interno scrivendolo con il metodo testo.document.write().

Abbiamo utilizzato i caratteri a-capo (n) per poter poi visualizzare il sorgente della popup in modo comprensibile e non su di una sola riga.

Aprire una finestra popup a pieno schermo (channelmode)

Avete mai provato a premere il tasto funzione F11 col browser aperto in primo piano? Il browser tipicamente va in modalità "schermo intero" (channel mode o full screen), perché tutto ritorni al suo posto basta digitare ancora F11.

Proviamo ad ottenere lo stesso effetto con JavaScript! Nulla cambia dal primo esempio, l'unica proprietà di stile che dobbiamo utilizzare è channelmode, ecco il codice:

<script type="text/javascript">
<!--
function F11() {
window.open("mioFile.htm", "", "channelmode");
}
//-->
</script>

richiamandola con:

<a href="javascript:F11()">Apri la popup</a>

ecco un esempio

Nota: Funziona solo con Internet Explorer.

Aprire una finestra popup a schermo intero (fullscreen)

Prendiamo in esame l'esempio precedente, per aprire una popup in modalità schermo intero (in modalità fullscreen) è sufficiente effettuare una piccola sostituzione:

<script type="text/javascript">
<!--
function SchermoIntero() {
window.open("mioFile.htm","","fullscreen=yes");
}
//-->
</script>

il richiamo HTML:

<a href="javascript:SchermoIntero()">Apri la popup</a>

ecco un esempio.

Nota: un utente inesperto potrebbe trovarsi spiazzato di fronte ad una situazione del genere, meglio mettere bene in evidenza un rassicurante bottone o link di chiusura. Anche questo esempio funziona solo su IE

Finestre di dialogo modali

Concludiamo questa panoramica sulle finestre popup parlando delle finestre di dialogo modali, ovvero finestre che non perdono mai il focus, ovvero, non è possibile iconizzarla o cliccare al di fuori dell'area della pupup.

Questo tipo di popup è ideale per sostituire un bruttino, per la verità, alert() JavaScript. L'esempio è funzionante solo con Microsoft Internet Explorer, quindi dobbiamo assicurarci che utenti che utilizzano browser diversi possano comunque visualizzare il messaggio, in questo caso con un alert(), per riferirci a IE ricorriamo a document.all, mentre per aprire la popup modale utilizziamo il metodo showModalDialog dell'oggetto window:

<script type="text/javascript">
<!--
function Modale() {
var prop = "dialogWidth: 430px; dialogHeight: 280px; center: 1; scroll: 0; help: 1; status: 0;";
if (document.all) {
window.showModalDialog("mioFile.htm", null, prop);
}
else {
alert("Questa funzione è compatibile solo con MSIE");
}
}
//-->
</script>

il richiamo HTML:

<a href="javascript:Modale()">Apri la popup modale</a>

vediamo in pratica quest'ultimo esempio.

Le proprietà di stile utilizzate per questo tipo di popup sono più vicine ai CSS che non all'HTML, esaminiamole singolarmente:

Parametro	Descrizione
dialogWidth	larghezza della popup
dialogHeight	altezza della popup
center	con valore uno imposta la finestra al centro, con zero in alto a sinistra del video
scroll	agisce sulla barra di scorrimento (uno: la visualizza - zero: non la visualizza)
help	con valore uno visualizza il bottone di aiuto a fianco a quello di chiusura, con zero ovviamente non lo visualizza
status	agisce sulla barra di stato (uno: la visualizza - zero: non la visualizza).