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.