Gestire finestre pop-up con Javascript

In questa lezione approfondiremo la tematica legata all’oggetto window, in particolare vedremo come creare e gestire finestre pop-up. Con questo termine si intende una finestra del browser aperta attraverso un comando Javascript. Tali finestre possono, inoltre, avere un aspetto particolare in quanto, con Javascript, è possibile personalizzare alcune caratteristiche della finestra come le dimensioni, la presenza o meno della statusbar, della scrollbar, ecc.

Iniziamo col dire che per aprire una finestra pop-up con javascript si utilizza il metodo open() dell’oggetto window. Questa la sua sintassi:

window.open('URL', 'Nome della finestra', 'Stile')

Tutti gli argomenti del metodo open() sono facoltativi quindi, in teoria, se volessimo aprire una finestra vuota del browser basterebbe utlizzare:

window.open();

Se volessimo semplicemente impostare una URL:

window.open('/');

Personalizziamo l’aspetto del pop-up

Attraverso il terzo parametro del metodo open() abbiamo la possibilità di personalizzare l’aspetto della nostra finestra a comparsa. Vediamo un esempio:

function ApriPopUp(pagina) {
  var stile = "top=10, left=10, width=250, height=200, status=no, menubar=no, toolbar=no scrollbars=no";
  window.open(pagina, '', stile);
}

All’interno della variabile stile abbiamo definito una serie di parametri di personalizzazione, che sono:

• top e left – definiscono (in pixel) la posizione della finestra impostando una distanza dal margine superiore e sinistro dello schermo;
• width e height – definiscono larghezza ed altezza (in pixel) della finestra;
• status – mostra o meno la barra di stato (yes/no);
• menubar – mostra o meno la barra dei menu (yes/no);
• toolbar – mostra o meno la barra degli strumenti (yes/no);
• scrollbars – mostra o meno le barre di scorrimento (yes/no);

Aprire un pop-up centrato nella pagina

Una delle esigenze più comuni quando si lavora con le finestre a comparsa consiste nel centrare il pop-up nella pagina. Per farlo non esistono trucchi particolari ma è sufficiente fare quattro conti e settare, nel modo corretto, i valori di top e di left:

function ApriPopUp(pagina,w,h) {
  var t = Math.floor((screen.height-h)/2);
  var l = Math.floor((screen.width-w)/2);
  var stile = "top="+t+", left="+l+", width="+w+", height="+h+", status=no, menubar=no, toolbar=no scrollbars=no";
  window.open(pagina, '', stile);
}

Come potete vedere, in questa funzione vengono passati tre parametri:

• la URL della pagina da aprire nel pop-up;
• la larghezza del pop-up (in pixel);
• l’altezza del pop-up (in pixel);

All’interno della funzione vengono, poi, calcolati dinamicamente i valori di scostamento (top/left) sulla base di un semplice conto matematico:

scostamento da sinistra = (larghezza dello schermo - larghezza del pop-up) / 2

Il medesimo calcolo è fatto per la determinazione dello scostamento dal margine superiore.