Finestre dipendenti da quella principale

Argomenti trattati: metodo showModalDialog() dell'oggetto window.

Nel discutere il metodo window.open(), è stato trattato il codice per creare nuove finestre, indipendenti da quella che le ha generate (definita opener), che vengono visualizzate sulla barra di stato.
In realtà è possibile aprire delle finestre dipendenti dalla pagina principale, che da essa possono essere aperte e che non vengono visualizzate sulla barra di stato (parliamo di piattaforma Windows).
Per ottenere questo tipo di finestre in Netscape è sufficiente aggiungere l'attributo 
dependent=yes
all'insieme della caratteristiche della finestra.
Usando MSIE è invece possibile utilizzare le finestre modali.
Queste permettono di caricare in una finestra di dialogo la pagina HTML che si vole mostrare, oppure si può scrivere al loro interno con il metodo dell'oggetto document document.write().
Finché l'utente manterrà aperta questa finestra, essa manterrà il focus e non vi si potrà accedere dalla finestra che la ha aperta.
Il rapporto finestra principale-finestra secondaria, che è stato descritto parlando del metodo dell'oggetto window window.open(), viene dunque meno.
La sintassi è:

windiag=window.showModalDialog(URL [, argomenti_passati [, caratteristiche]]);

windiag è la variabile che rappresenta il valore restituito della finestra modale, e non l'istanza della finestra stessa all'interno della pagina principale.
L'URL rappresenta l'indirizzo del documento HTML  da caricare, e possono inoltre essere passati un insieme di parametri che ne determinano le caratteristiche.
La finestra chiamante può passare un insieme di valori alla finestra di dialogo (argomenti passati).

Quando le proprietà dialogLeft e/o dialogTop sono specificate, la proprietà center viene sovrascritta.
Laddove vengono usati i valori 1, 0 oppure yes o no si possono utilizzare in alternativa i valori on o off.
E' inoltre possibile usare la proprietà resizable che indica se è premesso all'utente di ridimensionare la finestra.
Le caratteristiche della finestra modale corrispondono a quelle usate per i CSS.
Infatti, si possono impostare direttamente le proprietà font-family, font-style, font-size e font-weight.
Infine, la stringa usa come separatore il punto e virgola.
Segue un esempio:
features="dialogWidth=300;dialogHright=250;border=thick;status=yes";
La stringa accetterebbe come separatore tra la proprietà e il valore prescelto anche i due punti, ossia:
features="dialogWidth:300;dialogHright:250;border:thick;status:yes";

Segue un esempio relativo alle finestre modali.

Questo è il codice che interessa la visualizzazione dello script nella finestra che richiama la finestra modale:

<!-- viene aggiunto un opportuno stile al documento della finestra che richiama la Modal Dialog --> <style> <!--      *{background-color:#FFFFCC}      body{border:solid 3px red;background-color:#FFFFCC}      A{text-decoration:none;color:#FF6666;font-weight:bold}     <!--             notare lo stile per il tag DIV con ID writeretval, che crea una divisione visualizzata come un rettangolo verde all'interno del documento -->           #writeretval{border:solid 3px red;position:absolute;top:25;left:25;padding:10;color:white;background-color:green;width:350;height:100;text-align:center}      --> </style> <script language="JavaScript"> /* la funzione opendiag chiama la finestra di dialogo: - la variabile features viene valorizzata con una stringa corrispondente alle caratteristiche della finestra modale - vengono creati una serie di oggetti attraverso l'oggetto Object, che viene utilizzato dal linguaggio jscript ( il JavaScript versione Microsoft ) come precursore di tutti gli oggetti. Stiamo in pratica creando una serie di oggetti con 2 proprietà: -- name: corrispondente al nome di un colore; -- args: corrispondente al colore in esadecimale; - gli oggetti vengono passati all' Array arrObj, che a sua volta viene passato alla finestra modale come secondo argomento. Questo vuol dire che la finestra modale avrà a disposizione questi oggetti per elaborarli -- la variabile winurl viene valorizzata con l'indirizzo della pagina che sarà caricata nella finestra modale */ function opendiag() { features="dialogWidth=350px;dialogHeight=200px;dialogTop:250;dialogLeft:25;scrollbars=no;border=thick;help=off;status=off;resizable=off;font-family=arial;font-size=8pt;color=red"; // utilizzo l'oggetto Object per passare i parametri di riferimento alla finestra      newObj1=new Object();      newObj1.name="bianco";      newObj1.args="#FFFFFF";      newObj2=new Object();      newObj2.name="verde";      newObj2.args="#669900";      newObj3=new Object();      newObj3.name="blu";      newObj3.args="#336699";      newObj4=new Object();      newObj4.name="giallo";      newObj4.args="#FFFF00";      newObj5=new Object();      newObj5.name="arancione";      newObj5.args="#FF9900";      newObj6=new Object();      newObj6.name="rosa";      newObj6.args="#FFCCCC";      newObj7=new Object();      newObj7.name="viola";      newObj7.args="#CC66FF";      newObj8=new Object();      newObj8.name="nero";      newObj8.args="#000000";      newObj9=new Object();      newObj9.name="marrone";      newObj9.args="#996600";      newObj10=new Object();      newObj10.name="grigio";      newObj10.args="#C0C0C0";      arrObj=new Array(newObj1, newObj2, newObj3,newObj4, newObj5, newObj6, newObj7, newObj8, newObj9, newObj10);      winurl="windiag.htm";      // apro la finsetra di dialogo, assegnandola a windiag    /*windiag rappresenta il valore di ritorno della finestra modale, cioé il valore che essa restituirà alla finestra chiamante*/ windiag=window.showModalDialog(winurl,arrObj, features);    /* eseguo il controllo sul valore restituito: se il valore restituito non è una stringa vuota, sarà assegnato al colore di sforndo della divisione writeretval*/ if (windiag!="" && windiag!='undefined')      document.all['writeretval'].style.backgroundColor=windiag; } </script> </HEAD> <!-- all'interno del tag <BODY> del documento viene creata la divisione con ID writeretval --> <div id="writeretval" > <a href="JavaScript:opendiag()">-- Scegli un colore dalla finestra di dialogo --</a> </div>

Questo è il codice che interessa la visualizzazione dello script nella finestra modale:

<script Language="JavaScript"> <!-- // var keepVal=""; /* La funzione showObjs prende 2 parametri: - l'indice del valore selezionato nella select (quindi un numero) - l'oggetto select su cui avviene l'evento onChange() */ function showObjs(control,selection) {       winform=document.diagform;       if(control.options[selection].text!='')       {             winform.showval.value=window.dialogArguments[selection-1].args;             keepVal=keepVal + winform.showval.value;        }        else             document.diagform.showval.value="nessun valore selezionato"; } /*cliccando sul pulsante che chiude la finestra oppure chiudendo la dinestra, se è stato selezionato un colore, questo viene passato tramite la proprietà returnValue alla finestra principale, modificando il colore di sfondo della divisione contenuta nel documento */ function retVal()> {       window.returnValue=keepVal;       window.close(); } //--> </script>> </HEAD> <BODY BGCOLOR="#FFFFFF" onUnload="retVal()"> (...) <form name="diagform"> <script Language="JavaScript"> <!-- // //creo dinamicamente una select all'interno del documento della finestra modale document.writeln('<select name="diagsel" onchange="showObjs(this,this.selectedIndex)">') document.write('<option></option>') // assegno alla variabile dialogargs i valori passati alla finestra modale attraverso la finestra principale // viene usata la proprietà window.dialogArguments: in questo caso ottengo un Array di oggetti // bisogna notare che solo la finestra modale permette questo passaggio di valori dialogargs=window.dialogArguments; if (typeof(dialogargs)=='object') {       for(i=0;i<dialogargs.length;i++)       {       if (dialogargs[i].name!='undefined')             document.writeln('<option>' + dialogargs[i].name+ '</option>');       } } document.writeln('</select >'); textVal="nessun valore selezionato"; /* creo una casella di testo cui sarà passato il valore esadecimale di ogni colore selezionato tramite la funzione showObjs()*/ document.writeln('< input type="text" name="showval" value="' + textVal + '" size="' +( textVal.length + 2 )+ '" READONLY> '); //--> </script > <input type="button" name="setcolor" value="colora!" onclick="retVal()" > </form> (...)

Torna all'inizio | Home