Postback und Werte-Übergabe mit dem ModalDialog() (Internet Explorer)

Language: Deutsch
Programming Language: JScript
Published by: Thomas
Last Update: 5/8/2006
Views: 1273

Description

Ein nützliches Feature im IE ist die Funktion window.showModalDialog(). Mit ihr lassen sich Popups öffnen, die permanent im Vordergrund sind, und den eigentlichen Browserhintergrund sperren, so lange sie geöffnet sind - wie echte Dialoge.

Das Beispiel zeigt, wie man ein solches ModalDialog-Objekt öffnet, wie man in ihm ein Formular ausführen kann, ohne das sich dabei ein neues Fenster öffnet, und wie man zu guterletzt auch einen Wert aus dem Formular vom Dialog zurück zum Opener bekommt.

Insbesondere das Abschicken von Formularen ist dabei etwas tricky, hierzu muss man zu einem 0px-Frameset greifen, um zu verhindern, dass beim Postback ein neues Fenster geöffnet wird.

Code

Display line numbers

1 // Start.htm 2 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 <html xmlns="http://www.w3.org/1999/xhtml" > 5 <head> 6 <title>Opener</title> 7 <script type="text/javascript"> 8 9 10 11 function OpenDialog() 12 { 13 var params = new Object(); 14 params.Param1 = "Eins"; 15 params.Param2 = "Zwei"; 16 var returnValue = window.showModalDialog('dialog.htm', params, 'dialogHeight:300px;dialogWidth:400px;resizable:no;scroll:yes;status:no;'); 17 18 alert('Gewähle Sprache: ' + returnValue.Language); 19 20 } 21 22 </script> 23 </head> 24 <body> 25 26 <a href="javascript:OpenDialog()">Dialog öffnen</a> 27 28 </body> 29 </html> 30 31 // Dialog_Frameset.htm 32 33 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 34 <html xmlns="http://www.w3.org/1999/xhtml" > 35 <head> 36 <title>Dialog</title> 37 38 </head> 39 <frameset cols="0,*" border="0" framespacing="0" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0"> 40 <frame name="leer" src="" scrolling="no" padding="0" frameborder="0" border="0" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0"> 41 <frame name="execute" src="dialog.htm" scrolling="no" border="0" frameborder="no" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0"> 42 </frameset> 43 </html> 44 45 46 // Dialog.htm 47 48 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 49 <html xmlns="http://www.w3.org/1999/xhtml" > 50 <head> 51 <title>Dialog</title> 52 <script> 53 function Finish() 54 { 55 objReturn = new Object(); 56 objReturn.Language = document.getElementById('sel').options[document.getElementById('sel').selectedIndex].value 57 window.returnValue = objReturn; 58 window.close(); 59 } 60 </script> 61 </head> 62 <body> 63 64 65 <base target="_top"> 66 67 Übergebene Input-Parameter: 68 <br /><br /> 69 70 <script> 71 72 var params = parent.window.dialogArguments; 73 document.write(params.Param1 + "<br>"); 74 document.write(params.Param2); 75 76 </script> 77 <br /><br /> 78 Auswahl: <br /><br /> 79 80 <form action="dialog.htm" method="post"> 81 82 <select id="sel"> 83 <option value="de">Deutsch</option> 84 <option value="en">Englisch</option> 85 <option value="fr">Französisch</option> 86 </select> 87 88 <input type="submit" value="Postback" /> 89 90 </form> 91 92 <br /><br /><a href="javascript:Finish()">Gewähle Sprache übernehmen.</a> 93 94 </body> 95 </html>

Postback und Werte-Übergabe mit dem ModalDialog() (Internet Explorer)

Description

Code

No comments avaiable

Add a comment