Aprire una popup sempre in primo piano

Gli argomenti di questa pagina

  • Popup centrata nella finestra e sempre in primo piano
  • La funzione JS per aprire la Popup
  • Aprire la popup al clik
  • Aprire la popup da una scelta eseguita in una SELECT

Popup centrata nella finestra e sempre in primo piano

Alcune volte è utile usare delle popup per svariati motivi: Per brevi messaggi, per presentare un form, per delle istruzioni o altro.
In PHP è utile aprire una popup
La finestra pop-up viene spesso generata da un JavaScript. In giro ci sono molti script per aprire queste finestre ma molti hanno alcuni difetti da me inaccettabili:
ad ogni click sul link si aprono innumerevoli finestre creando confusione. Se c'è una finestra aperta e se ne apre un'altra, quella aperta continua a rimanere nascosta e bisogna andare a cercarla nella barra delle applicazioni.

Il seguente script apre sepre una sola popup alla volta e la mette subito in primo piano sostituendo quella precedentemente aperta.

La funzione JS per aprire la Popup

La funzione JS per aprire la nostra Popup non è molto complesso:

1
2
3
4
5
6
7
8
function Centrata(pagina) {
    var w = 950
    var h = 700
    var l = Math.floor((screen.width-w)/2);
    var t = Math.floor((screen.height-h)/2);
    centro=window.open(pagina,"centro","width=" + w + ",height=" + h + ",top=" + t + ",left=" + l + ",scrollbars=yes");
    if(centro.window.focus){centro.window.focus();}
}

Per quanto riguarda questo codice è possibile modificare alcuni parametri.
var w = 950: determina la larghezza della popup
var h = 700: determina l'altezza della popup
Poi è possibile intervenire su alcuni segmenti di stringa evidenziati:
centro=window.open(pagina,"centro","width=" + w + ",height=" + h + ",top=" + t + ",left=" + l + ",scrollbars=yes");
centro=window.open(pagina,"centro","width=" + w + ",height=" + h + ",top=" + 40 + ",left=" + 75 + ",scrollbars=yes");
Al posto di top=" + t è possibile indicare lo spazio che si vuole dal margine superiore dello schermo (top=" + 40)
Al posto di left=" + l è possibile indicare lo spazio che si vuole dal margine sinistro dello schermo (left=" + 75)

Aprire la popup al clik

Centrata() è il nome della funzione JS da chiamare per aprire la popup e nella pagina HTML la si chiama in questo modo (attenzione agli apici):

1
<a href="javascript:Centrata('popup/popup.php')">Apri popup</a>

Qui un esempio per aprire la popup: Apri popup

Aprire la popup da una scelta eseguita in una SELECT

Leggermente più complesso è l'apertura della popup da una scelta effettuata.

Nel form viene inserita una SELECT.
Per aprire la popup occorre agire in due tempi sulla SELECT:
nel TAG <select> occorre chiamare in causa l'evento "onchange" invocando la funzione Javascript che apre la popup
nei TAG <option> occorre indicare nel "value" il nome della pagina da aprire con eventuale Querystring.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<form method="post" name="Nomi" action="">
<select name="menu" onchange="javascript:Centrata(this.options[this.selectedIndex].value);">
<option value="">Scegliere</option>
<option value="popup/popup.php?ID=6">Bianchi</option>
<option value="popup/popup.php?ID=7">Rossi</option>
<option value="popup/popup.php?ID=3">Ferrari</option>
<option value="popup/popup.php?ID=4">Esposito</option>
<option value="popup/popup.php?ID=5">Conti</option>
<option value="popup/popup.php?ID=1">Mancini</option>
<option value="popup/popup.php?ID=2">Fontana</option>
<option value="popup/popup.php?ID=8">Longo</option>
<option value="popup/popup.php?ID=9">Gentile</option>
</select>
</form>

La funzione JS è la stessa già vista più sopra.

1
2
3
4
5
6
7
8
function Centrata(pagina) {
    var w = 950
    var h = 700
    var l = Math.floor((screen.width-w)/2);
    var t = Math.floor((screen.height-h)/2);
    centro=window.open(pagina,"centro","width=" + w + ",height=" + h + ",top=" + t + ",left=" + l + ",scrollbars=yes");
    if(centro.window.focus){centro.window.focus();}
}

Tuttavia non possiamo fare a meno di notare che c'è un piccolo difetto.
Scegliendo le varie voci la popup si apre regolarmente.
Se però riportiamo la SELECT alla posizione originale ("Scegliere"), si apre una finestra vuota ("about:blank") del tutto indesiderata.

Per ovviare a questo inconveviente occorre effettuare una piccola modifica alla funzione JS come è mostrato qui in basso.

Prima di mandare il esecuzione le istruzioni che aprono la popup occorre fare una verifica sull'argomento "pagina" che accompagna la funzione.
Se è vuota le istruzioni non verranno eseguite.

A chi è attento al codice non sfuggirà che alla funzione è stato cambiato il nome.
La funzione precedente era chiamata Centrata() ora viene chiamata CentraPagina().
Questo cambio di nome alla funzione si è reso necessario in questa pagina perchè la prima funzione è stata usata per la prima SELECT e quindi questa seconda funzione deve necessariamente avere un nome differente in quanto i nomi delle funzioni usate in una pagina debbono essere univoci.
Per lo stesso motivo è stato cambiato il nome anche al form.

Il form rimane quello visto precedentemente anche se viene usato questo secondo nome della funzione JS. Il nome della pagina viene catturato ed inviato alla funzione personale con l'istruzione:
this.options[this.selectedIndex].value

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<form method="post" name="Nomi2" action="">
<select name="menu" onchange="javascript:CentraPagina(this.options[this.selectedIndex].value);">
<option value="">Scegliere</option>
<option value="popup/popup.php?ID=6">Bianchi</option>
<option value="popup/popup.php?ID=7">Rossi</option>
<option value="popup/popup.php?ID=3">Ferrari</option>
<option value="popup/popup.php?ID=4">Esposito</option>
<option value="popup/popup.php?ID=5">Conti</option>
<option value="popup/popup.php?ID=1">Mancini</option>
<option value="popup/popup.php?ID=2">Fontana</option>
<option value="popup/popup.php?ID=8">Longo</option>
<option value="popup/popup.php?ID=9">Gentile</option>
</select>
</form>

Questa è la funzione modificata.

1
2
3
4
5
6
7
8
9
10
function CentraPagina(pagina) {
    if (pagina) {
        var w = 950
        var h = 800
        var l = Math.floor((screen.width-w)/2);
        var t = Math.floor((screen.height-h)/2);
        centro=window.open(pagina,"centro","width=" + w + ",height=" + h + ",top=" + t + ",left=" + l + ",scrollbars=yes");
        if(centro.window.focus){centro.window.focus();}
    }
}

Ora il form funzionerà correttamente

 

 

settore tecnico il sito di lorettabweb il Forum di sostegno
il forum il forum il forum