JavaScript  »  Articoli  »  Effetti e controlli Javascript 

Aprire una finestra popup a pieno schermo (channelmode)

Avete mai provato a premere il tasto funzione F11 col browser aperto in primo piano? Il browser tipicamente va in modalità "schermo intero" (channel mode o full screen), perché tutto ritorni al suo posto basta digitare ancora F11.

Proviamo ad ottenere lo stesso effetto con JavaScript! Nulla cambia dal primo esempio, l'unica proprietà di stile che dobbiamo utilizzare è channelmode, ecco il codice:

<script type="text/javascript">
<!--
function F11() {
  window.open("mioFile.htm", "", "channelmode");
}
//-->
</script>

richiamandola con:

<a href="javascript:F11()">Apri la popup</a>

ecco un esempio

Nota: Funziona solo con Internet Explorer.

Aprire una finestra popup a schermo intero (fullscreen)

Prendiamo in esame l'esempio precedente, per aprire una popup in modalità schermo intero (in modalità fullscreen) è sufficiente effettuare una piccola sostituzione:

<script type="text/javascript">
<!--
function SchermoIntero() {
  window.open("mioFile.htm","","fullscreen=yes");
}
//-->
</script>

il richiamo HTML:

<a href="javascript:SchermoIntero()">Apri la popup</a>

ecco un esempio.

Nota: un utente inesperto potrebbe trovarsi spiazzato di fronte ad una situazione del genere, meglio mettere bene in evidenza un rassicurante bottone o link di chiusura. Anche questo esempio funziona solo su IE

Finestre di dialogo modali

Concludiamo questa panoramica sulle finestre popup parlando delle finestre di dialogo modali, ovvero finestre che non perdono mai il focus, ovvero, non è possibile iconizzarla o cliccare al di fuori dell'area della pupup.

Questo tipo di popup è ideale per sostituire un bruttino, per la verità, alert() JavaScript. L'esempio è funzionante solo con Microsoft Internet Explorer, quindi dobbiamo assicurarci che utenti che utilizzano browser diversi possano comunque visualizzare il messaggio, in questo caso con un alert(), per riferirci a IE ricorriamo a document.all, mentre per aprire la popup modale utilizziamo il metodo showModalDialog dell'oggetto window:

<script type="text/javascript">
<!--
function Modale() {
  var prop = "dialogWidth: 430px; dialogHeight: 280px; center: 1; scroll: 0; help: 1; status: 0;";
  if (document.all) {
    window.showModalDialog("mioFile.htm", null, prop);
  }
  else {
    alert("Questa funzione è compatibile solo con MSIE");
  }
}
//-->
</script>

il richiamo HTML:

<a href="javascript:Modale()">Apri la popup modale</a>

vediamo in pratica quest'ultimo esempio.

Le proprietà di stile utilizzate per questo tipo di popup sono più vicine ai CSS che non all'HTML, esaminiamole singolarmente:

Parametro	Descrizione
dialogWidth	larghezza della popup
dialogHeight	altezza della popup
center	con valore uno imposta la finestra al centro, con zero in alto a sinistra del video
scroll	agisce sulla barra di scorrimento (uno: la visualizza - zero: non la visualizza)
help	con valore uno visualizza il bottone di aiuto a fianco a quello di chiusura, con zero ovviamente non lo visualizza
status	agisce sulla barra di stato (uno: la visualizza - zero: non la visualizza).

Altri articoli

Altre guide

Altre newsletter