back to top

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.

Pubblicità
Massimiliano Bossi
Massimiliano Bossi
Stregato dalla rete sin dai tempi delle BBS e dei modem a 2.400 baud, ho avuto la fortuna di poter trasformare la mia passione in un lavoro (nonostante una Laurea in Giurisprudenza). Adoro scrivere codice e mi occupo quotidianamente di comunicazione, design e nuovi media digitali. Orgogliosamente "nerd" sono il fondatore di MRW.it (per il quale ho scritto centinaia di articoli) e di una nota Web-Agency (dove seguo in prima persona progetti digitali per numerosi clienti sia in Italia che all'estero).