Es soll ein Dialogfenster geöffnet werden, in dem der Benutzer verschiedene Eingaben tätigen kann, die in das Hauptfenster übernommen werden sollen. Solange das Dialogfenster geöffnet ist, sollen Eingaben im Hauptfenster nicht möglich sein. Im Beispiel werden die Eigenschaften für einen HTML-Verweis mit Hilfe eines modalen Dialogs abgefragt und im Hauptfenster zur Kontrolle ausgegeben.
// JScript-Code im Hauptfenster
function LinkCollection(Ref, Tit, Txt) {
this.Referenz = Ref || 'default.htm';
this.Titeltext = Tit || 'Default';
this.Beschriftung = Txt || 'Beispiel';
this.UpdateText = UpdateIt;
}
var vColl = new LinkCollection();
function CallDialog() {
showModalDialog("dialog.html",vColl,"status:false;dialogWidth:300px;dialogHeight:230px");
}
function UpdateIt() {
lRef.innerText = vColl.Referenz;
tText.innerText = vColl.Titeltext;
bText.innerText = vColl.Beschriftung;
Testlink.href = vColl.Referenz;
Testlink.title = vColl.Titeltext;
aTest.innerText = vColl.Beschriftung;
}
// JScript-Code im Popup
function GetInfo()
{
var obj = dialogArguments;
obj.Referenz = RefInput.value;
obj.Titeltext = TitInput.value;
obj.Beschriftung = BeschInput.value;
obj.UpdateText();
}
<!-- Code des Hauptfensters --> <html> <head> <title>Testseite <script language="Jscript" src="haupt.js"></script> </head> <body onload="UpdateIt();"> <input type="button" value="Link aendern" onclick="CallDialog()"> <p>So sieht der HTML-Code aus:</p> <p><a href='<span id="lRef"></span>' title='<span id="tText"></span>'><span id="bText"></span></a></p> <p>Testlink: <a id="Testlink" href="" title=""><span id="aTest"></a> </body> </html> <!-- Code des modalen Dialogfensters --> <html> <head> <title>Dateneingabe</title> <script language="Jscript" src="dialog.js"> </head> <body style="margin:10px"> <p>Link: <input id="RefInput"></p> <p>Titel: <input id="TitInput"></p> <p>Beschriftung: <input id="BeschInput"></p> <input value="Update" type="button" onclick="GetInfo();"> <input value="Ok" TYPE="button" onclick="GetInfo();window.close();"> <input value="Abbrechen" TYPE="button" onclick="window.close();"> </body> </html>
Der Datenaustausch zwischen Hauptfenster und modalem Dialog erfolgt über das Objekt vColl, das am Anfang des Scriptbereichs erzeugt wird. Dem Objekt werden die für den Link erforderlichen Eigenschaften sowie eine Referenz auf die Funktion UpdateIt zugewiesen, letztere sorgt für das Ausgeben der Benutzereingaben im Hauptfenster. Damit das Objekt sowohl im Haupt- als auch im Dialogfenster verfügbar ist, muss es in der Anweisung showModalDialog als zweiter Parameter notiert werden.
Der Einsatz der Methode showModalDialog ist in diesem Kontext auch mit aktiviertem Popupblocker (Internet Explorer 6.0 für Windows XP Service Pack 2) unproblematisch, da dieser nur unaufgefordert geöffnete Fenster blockiert, im vorliegenden Fall das Fenster jedoch durch eine Aktion des Benutzers aufgerufen wird.