Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Popup centrate con Javascript

Una comoda funzione per aprire finestre popup al centro dello schermo
Una comoda funzione per aprire finestre popup al centro dello schermo
Link copiato negli appunti

In questo breve tutorial vedremo una funzione che ci consente di aprire finestre popup che appariranno centrate sullo schermo una volta aperte. Ecco subito l'esempio. È disponibile nel pacchetto zip allegato insieme al documento pop.html (quello che apriremo all'interno della popup).

Per il codice Javascript vi rimando direttamente all'esempio. Come si vedrà, si tratta di una sola, semplice, funzione: newWindow. Il codice deve essere lasciato intatto.

Quando la funzione newWindow viene richiamata dalla pagina HTML, bisogna fornire ben 11 parametri. Ecco il link che apre la popup presente nel nostro esempio:

<p><a href="pop.html" onclick="newWindow(this.href, 'popup', 600, 500, 1, 1, 0, 0, 0, 1, 0); return false;"
target="_blank">Apri popup</a></p>

Vediamo nell'ordine i parametri da settare.

  1. URL del file da aprire: usando this.href, lo script andrà a usare come valore quello impostato per l'attributo href (che sempre impostato per salvguardare l'accessibilità!);
  2. nome della finestra popup: nel nostro caso il nome è 'popup', ma qualunque nome va bene;
  3. larghezza della finestra (600);
  4. altezza della finestra (500);
  5. presenza delle scrollbar (1 = sì, 0 = no);
  6. la finestra è ridimensionabile? (1 = sì, 0 = no);
  7. presenza della barra dei menu (1 = sì, 0 = no);
  8. presenza della barra degli strumenti (1 = sì, 0 = no);
  9. presenza della barra dell'indirizzo (1 = sì, 0 = no);
  10. presenza della barra di stato (1 = sì, 0 = no);
  11. visualizzazione a tutto schermo (1 = sì, 0 = no).

Una nota per concludere. Nel link è presente anche l'attributo target="_blank". Qualcuno potrà chiedersi a cosa serve visto che usiamo una funzione per aprire una nuova finestra. Serve nel caso Javascript sia disabilitato sul browser dell'utente. L'apertura della pagina avverrà comunque in una nuova finestra.

Ti consigliamo anche