1. Definition

window.showModalDialog() wird verwendet, um einen modalen Dialog zu erstellen

Die Syntax lautet: vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures]);

Parameter:

(1) sURL: Gibt die URL des Dokuments an, das im Dialogfeld angezeigt werden soll, eine Zeichenfolge, erforderlich

(2) vArguments: Parameter, die an das Dialogfeld übergeben werden sollen, Varianten (Arrays, Variablen usw.), optional

(3) sFeatures: Darstellungsinformationen des generierten Dialogfelds, Zeichenfolge, optional

Parameter	Bedeutung	veranschaulichen
dialogHeight	Dialoghöhe	Nicht weniger als 100 Pixel
dialogWidth	Dialogbreite
dialogLeft	Abstand vom Bildschirm links
dialogTop	Abstand vom Bildschirm
Center	Ist es zentriert?	Standard ja(ja:1,nein:0)
helfen	Ob die Hilfeschaltfläche angezeigt werden soll	Standardmäßig ja
der Größe veränderbar	Kann in der Größe geändert werden	Standard-Nr
Status	Ob die Statusleiste angezeigt werden soll	Modal ist standardmäßig auf „Nein“ eingestellt, „Modeless“ ist standardmäßig auf „Ja“ eingestellt
scrollen	ob die Bildlaufleiste angezeigt werden soll	Die Standardeinstellung ist „Ja“.

Beachten:

window.showModalDialog() kann nur im IE-Browser verwendet werden. Wenn es sich um einen Chrome- oder Firefox-Browser handelt, können Sie die Methode window.open() verwenden. Informationen zur spezifischen Verwendung von window.open() finden Sie unter https://www .cnblogs.com/ wugongzi/p/13438578.htmlDieser Blogbeitrag.

der Unterschied:

Sowohl window.showModalDialog() als auch window.open() können die Seite öffnen. Was ist der Unterschied zwischen ihnen?

Verwenden Sie window.showModalDialog(), um das Fenster zu öffnen, und der folgende js-Code wird erst ausgeführt, nachdem das geöffnete Fenster geschlossen wurde (synchron); während window.open() das Fenster öffnet, wird der Code weiterhin ausgeführt (asynchron). Wenn Sie also die Methode ausführen möchten, nachdem Sie den Wert der Unterseite erhalten haben, wird empfohlen, die Methode showModalDialog() zu verwenden

2. Nutzung

Schauen wir uns nun an, wie man showModalDialog verwendet

Wir erstellen zwei neue Seiten und platzieren sie im selben Ordner mit den Namen parent.html und child.html, die jeweils die übergeordnete Seite und die untergeordnete Seite darstellen. Öffnen Sie das Fenster der untergeordneten Seite auf der übergeordneten Seite und übergeben Sie Parameter. Die untergeordnete Seite gibt die Ausgabe aus, nachdem sie die von der übergeordneten Seite übergebenen Parameter empfangen hat, und übergibt gleichzeitig den Rückgabewert an die übergeordnete Seite, wenn die untergeordnete Seite geschlossen wird. Nachdem die übergeordnete Seite den Rückgabewert erhalten hat, gibt sie ihn aus.

parent.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>父页面——showModalDialog用法</title>
</head>
<body>
    <div>
        <button onclick="showDialog()">打开新窗口</button>
    </div>
    <script>
        function showDialog() {
     
     
            var message = "我是父页面的数据123";
            var obj = window.showModalDialog("child.html", message, 'dialogWidth:300px;dialogHeight:380px;');
            alert("返回的数据"+obj);
        }
    </script>
</body>
</html>

child.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="getMessage()">获取父页面传递过来的数据</button>
    <script>
        function getMessage() {
     
     
            var message = window.dialogArguments;
            alert(message);
            window.returnValue="我是返回的数据abc";
        }
    </script>
</body>
</html>

window.showModalDialog() Verwendung

1. Definition

2. Nutzung

Guess you like