Heim > Artikel > Web-Frontend > Einführung in die Verwendung von js-modalen Fenstern (modale Dialogfelder und nichtmodale Dialogfelder)_Grundkenntnisse
Javascript ist in modale Dialogfelder und Nicht-Modus-Dialogfelder unterteilt. Der Unterschied zwischen beiden besteht tatsächlich darin, ob der Benutzer an anderer Stelle auf derselben Seite arbeiten kann, bevor das Dialogfeld geschlossen wird. Das Dialogfeld „Datei öffnen“ ist beispielsweise ein typisches modales Dialogfeld. Nur wenn Sie in diesem Dialogfeld Maßnahmen ergreifen, können Sie andere Vorgänge in dem Programm ausführen, das das Dialogfeld öffnet. Dies ist für nicht modale Dialogfelder nicht erforderlich .
Modaler Dialog: showModalDialog
Modusloser Dialog: showModelessDialog
vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])
vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures])
Rückgabewert: vReturnValue, natürlich wird der Rückgabewert aus dem Dialogfeld
zurückgegeben
sURL: erforderlich, die Seite, die Sie öffnen möchten;
Optionaler Parameter, Typ: Variante. Wird verwendet, um Parameter an das Dialogfeld zu übergeben. Die Art der übergebenen Parameter ist nicht beschränkt, einschließlich Arrays usw. Das Dialogfeld erhält die über window.dialogArguments übergebenen Parameter.
sFeatures--
Optionaler Parameter, Typ: Zeichenfolge. Zur Beschreibung des Erscheinungsbilds des Dialogfelds und anderer Informationen können Sie einen oder mehrere der folgenden, durch Semikolons „;“ getrennten Werte verwenden.
1.DialogHeight: Die Höhe des Dialogfelds, nicht weniger als 100 Pixel. Die Standardeinheit von DialogHeight und DialogWidth in IE4 ist em, während sie in IE5 px ist. Zur Vereinfachung der Anzeige verwenden Sie beim Definieren eines modalen Dialogfelds px als Einheit.
2.dialogWidth: Breite des Dialogfelds.
3.dialogLeft: Abstand von der linken Seite des Bildschirms.
4.dialogTop: Abstand vom Bildschirm.
5.center: {yes |. 1 |. 0}: Ob das Fenster zentriert ist, der Standardwert ist ja, aber die Höhe und Breite können weiterhin angegeben werden.
6.Hilfe: {Ja |. 1 |. 0}: Ob die Hilfeschaltfläche angezeigt werden soll, die Standardeinstellung ist Ja.
7.resizable: {yes |. no |. 0} [IE5+]: Ob die Größe geändert werden kann. Der Standardwert ist Nein.
8.status: {ja |. nein |. 0} [IE5]: Ob die Statusleiste angezeigt werden soll. Der Standardwert ist „yes[Modal]“ oder „no[Modal]“.
9.scroll:{ ja |. 1 |. 0 | aus }: Gibt an, ob das Dialogfeld Bildlaufleisten anzeigt. Der Standardwert ist „Ja“.
Die folgenden Attribute werden in HTA verwendet und werden im Allgemeinen nicht auf normalen Webseiten verwendet.
10.dialogHide:{ ja |. 1 | aus }: Ob das Dialogfeld beim Drucken oder in der Druckvorschau ausgeblendet ist. Der Standardwert ist Nein.
11.edge:{ versunken |. angehoben }: Gibt den Rahmenstil des Dialogfelds an. Der Standardwert wird erhöht.
12.unadored:{ ja |. 1 |.
Parameterübergabe:
----------------
parent.htm
<script> var obj = new Object(); obj.name="51js"; window.showModalDialog("modal.htm",obj,"dialogWidth=200px;dialogHeight=100px"); </script>
<script> var obj = window.dialogArguments alert("您传递的参数为:" + obj.name) </script>
2. Sie können über window.returnValue Informationen an das Fenster zurückgeben, das das Dialogfeld geöffnet hat, und natürlich kann es sich auch um ein Objekt handeln. Zum Beispiel:
----------------
parent.htm
<script> str =window.showModalDialog("modal.htm",,"dialogWidth=200px;dialogHeight=100px"); alert(str); </script>
<script> window.returnValue="http://www.51js.com"; </script>
Voraussetzung für interaktive Operationen ist, dass beim Aufruf der Methode showModalDialog oder showModelessDialog der zweite Parameter an window übergeben wird, z. B.:
window.showModelessDialog('filename.htm',window,'dialogWidth=200px;dialogHeight=250px;')
Als nächstes müssen einige Daten und Methoden des übergeordneten Fensters abgerufen werden. Das übergeordnete Fenster kann normalerweise die Parameter des untergeordneten Fensters über returnValue
abrufen
//取得父窗口的JS变量 var window.dialogArguments.var; //获得父窗口的对象和属性 window.dialogArguments.form1.name.value ; //调用父窗口的方法 fun window.dialogArguments.fun() ;