JavaScript  »  Articoli  »  Effetti e controlli Javascript 

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 del Tag 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

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 scrollbar=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() e che ci servirà all'interno del link di richiamo a questo script per indicare il file di destinazione:

<a href="javascript:Popup('mioFile.htm')">Apri la popup</a>

I parametri di stile all'interno della funzione window.open() risulteranno di certo chiari a chiunque mastichi un minimo di HTML.

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.

Propongo 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 (lettera elle - 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.

Altri articoli

Altre guide

Altre newsletter