Lavora con noi

JavaScript

Siti tematici

Speciali

Ajax

JavaScript » Articoli » Effetti e controlli Javascript

Pagine:

RSS

Esempi di finestre popup

di: Luca Ruggiero 12 Marzo 2003

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.