In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > dialog > properties > dialogArguments (window)

dialogArguments property (window)

Browser support:

	3

Returns a variable that was passed as an extra argument to a modal dialog window created with the window.showModalDialog or window.showModelessDialog method.

The dialogArguments property is supported in Firefox from version 3.

Syntax:

object.dialogArguments;

You can find the related objects in the Supported by objects section below.

This property is read-only.

Possible values:

Arbitrary data type.

Default: this property has no default value.

Example HTML code 1:

This example shows how to generate a modal dialog, and how to communicate between the opener and the modal window:

Code

modal.htm

<head>
    <script type="text/javascript">
        function UpdateFields (newFore, newSur) {
            var forename = document.getElementById ("forename");
            var surname = document.getElementById ("surname");
            forename.value = newFore;
            surname.value = newSur;
        }

        function ShowModal () {
            var forename = document.getElementById ("forename");
            var surname = document.getElementById ("surname");

            var sharedObject = {};
            sharedObject.forename = forename.value;
            sharedObject.surname = surname.value;
            
            if (window.showModalDialog) {
                var retValue = showModalDialog ("modal.htm", sharedObject, "dialogWidth:200px; dialogHeight:200px; dialogLeft:300px;");
                if (retValue) {
                    UpdateFields (retValue.forename, retValue.surname);
                }
            }
            else {
                    // similar functionality in Opera, but its not modal!
                var modal = window.open ("modal.htm", null, "width=200,height=200,left=300,modal=yes,alwaysRaised=yes", null);
                modal.dialogArguments = sharedObject;
            }
        }
    </script>
</head>
<body>
    Forename: <input type="text" id="forename" value="Alan"/><br />
    Surname: <input type="text" id="surname" value="Smith"/>
    <br /><br />
    <button onclick="ShowModal ()">Edit fields with a modal dialog!</button>
</body>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Modal dialog sample</title>
    <script type="text/javascript">
        function Init () {
            var sharedObject = window.dialogArguments;

            var forename = document.getElementById ("forename");
            var surname = document.getElementById ("surname");
            forename.value = sharedObject.forename;
            surname.value = sharedObject.surname;
        }

        function OnOK () {
            var forename = document.getElementById ("forename");
            var surname = document.getElementById ("surname");

            if (window.showModalDialog) {
                var sharedObject = {};
                sharedObject.forename = forename.value;
                sharedObject.surname = surname.value;

                window.returnValue = sharedObject;
            }
            else {
                    // if not modal, we cannot use the returnValue property, we need to update the opener window
                window.opener.UpdateFields (forename.value, surname.value);
            }
            window.close ();
        }

        function OnCancel () {
            window.close ();
        }
    </script>
<body onload="Init ();">
    Forename: <input type="text" id="forename"/><br/>
    Surname: <input type="text" id="surname"/>
    <br/><br/>
    <button onclick="OnOK ()">OK</button> <button onclick="OnCancel ()">Cancel</button>
</body>
</html>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example shows how to create a modeless dialog in different browsers, and how to communicate between the opener and the modeless window:

Code

modeless.htm

<head>
    <script type="text/javascript">
        function OpenModeless () {
            if (window.showModelessDialog) {        // Internet Explorer
                showModelessDialog ("modeless.htm", window, "dialogHeight:200px");
            } 
            else {
                window.open ("modeless.htm", "","width=300, height=200, alwaysRaised=yes");
            }
        }
    </script>
</head>
<body>
    First open a modeless dialog with this button:
    <button id="modeless_button" onclick="OpenModeless ();">Open Modeless Dialog!</button>
    <br /><br />
    You can change the text color of the button with the selection list of the modal window.
</body>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Modeless window example</title>
    <script type="text/javascript">
        function ChangeButtonColorInOpener (selectTag) {
            var openerWindow = null;
            if (window.dialogArguments) { // Internet Explorer
                openerWindow = window.dialogArguments;
            } else {        // Firefox, Safari, Google Chrome and Opera
                if (window.opener) {
                    openerWindow = window.opener;
                }
            }
            if (openerWindow) {
                var button = openerWindow.document.getElementById ("modeless_button");
                button.style.color = selectTag.options[selectTag.selectedIndex].text;
            }
        }
    </script>
<body>
    Change the color of the button in the opener window:
    <select onchange="ChangeButtonColorInOpener (this)">
        <option />black
        <option />red
        <option />blue
        <option />green
    </select>
</body>
</html>