Vediamo come fare per aprire il nostro link in un pop up con caratteristiche personalizzate.
Premetto che personalmente non amo molto le finestre personalizzate, perché ho l'impressione di forzare la volontà dell'utente, nell'aprire una finestra "come dico io".
Ma effettivamente, in alcuni casi, può risultare interessante offrire all'utente un pop up che, per la tipologia di informazione fornita, può risultare comodo se visualizzato estemporaneamente alla pagina. Vediamo perciò come fare per aprire con un link, una piccola finestra di dimensioni personalizzate.
Per aprire la nostra finestra personalizzata chiediamo aiuto a JavaScript che grazie a
window.open e a pochi parametri, ci permette di personalizzare ogni aspetto della nuova finestra.
Esempio
Il codice di base è semplice
<a href="#" onClick"javascript:window.open('http://www.example.com', '', 'width=600,height=400,menubar,toolbar,resizable');">Example.com</a>
Struttura
window.open(
url,
nome,
specifiche,
replace)
Spieghiamo
- Con window.open chiediamo al JavaScript di aprire una nuova finestra;
- Con url, specifichiamo l'url della pagina da raggiungere;
- Sarebbe possibile aprire una nuova finestra vuota, semplicemente omettendo l'url;
- Con nome possiamo specificare l'attributo di destinazione o il nome della finestra.
I valori possibili sono:
- _blank (l'url viene aperto in una nuova finestra, impostazione predefinita);
- _parent
(l'url viene aperto nel frame principale);
- _self
(l'url sostituisce la pagina corrente);
- _top
(l'url sostituisce ogni set di frame presente);
- nome (si può impostare il nome della finestra);
- Con specifiche possiamo impostare una serie di valori separati da virgola.
I valori possibili sono:
- channelmode=yes/no oppure 1/0 predefinito no
- directories=yes/no oppure 1/0 predefinito yes
- fullscreen=
yes/no oppure 1/0 predefinito no
- height=valore in pixels predefinito minimo 100
- left=valore in pixels predefinito 0
- location=
yes/no oppure 1/0 predefinito yes
- menubar=
yes/no oppure 1/0 predefinito yes
- resizable=yes/no oppure 1/0 predefinito yes
- scrollbars=
yes/no oppure 1/0 predefinito yes
- status=
yes/no oppure 1/0 predefinito yes
- titlebar=
yes/no oppure 1/0 predefinito yes
- toolbar=
yes/no oppure 1/0 predefinito yes
- top=valore in pixels predefinito 0
- width=valore in pixels predefinito minimo 100
- Con replace si gestisce l'elemento nella cronologia.
I valori possibili sono:
- true
(l'url si inserisce in cronologia);
- false
(l'url crea una nuova storia cronologica);
Spieghiamo
In questo esempio linchiamo la pagina http://www.example.com, lasciando vuoto il secondo parametro obbligatorio che quindi di default sarà _blank, poi impostiamo la larghezza della pagina a 600px, l'altezza a 400px, impostiamo il menù della pagina, che senza un valore settato risulta yes di default, lo stesso per la toolbar e per resizabile che hanno sempre yes di default.
Volendo si può scorporare la funzione, se ad esempio si deve utilizzare più volte nella pagina lo stesso link, questa soluzione può essere sicuramente più versatile.
Vediamo un esempio con JavaScript in head
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Nuova Finestra Example.com</title>
<script type="text/javascript">
function nuova_finestra()
{
window.open('http://www.example.com', '', 'left=100,top=100,width=600,height=400,menubar,toolbar,resizable')
}
</script>
</head>
<body>
<a href="#" onclick="nuova_finestra()">Example.com</a>
<input type="button" value="Button Nuova Finestra" onclick="nuova_finestra()" />
</body>
</html>
Spieghiamo
Ho scorportato la funzione JavaScript e l'ho posta in <head> tra i tag <script>.
Tutte le volte che dalla pagina vorrò richiamare la funzione
nuova_finestra(), righe nell'esempio da 6 a 11, basterà inserire nel link o nell'onclick
nuova_finestra() come riportato nell'esempio alle righe 15 e 16, rispettivamente un link e un button.
Sia il link che il button producono lo stesso risultato.
