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

You are here: Reference > JavaScript > client-side > dialog > methods > showModalDialog (window)

showModalDialog method (window)

Browser support:

	3

Creates a modal dialog and loads the specified document into it.

While the modal dialog is open, the opener window cannot get the input focus and the showModalDialog method does not return. Modal dialogs are always displayed on top of their opener windows. The user cannot switch to the opener window until the modal dialog is closed.

For example, the alert and the confirm methods display modal dialogs.

The showModalDialog method is supported in Firefox from version 3.

Syntax:

object.showModalDialog (URL [, arguments [, features]]);

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

Parameters:

URL

Required. String that specifies the location of the document to display in the modal dialog.

arguments

Optional. Specifies an object with an arbitrary type or a primitive value to pass to the dialog. Use the dialogArguments property to get this value in the dialog.

features

Optional. String that specifies a comma-separated list of options. Each option is a name, value pair, delimited by a semicolon.

The following options are supported:

dialogHeight : number

number is an integer that specifies the height of the dialog's client area, in pixels. Minimum value is 100.

dialogLeft : number

number is an integer that specifies the left position of the dialog window relative to the left side of the screen, in pixels. Negative values are not allowed.

dialogTop : number

number is an integer that specifies the top position of the dialog window relative to the top side of the screen, in pixels. Negative values are not allowed.

dialogWidth : number

number is an integer that specifies the width of the dialog's client area, in pixels. Minimum value is 100.

center : { yes|no | on|off | 1|0 }

If this feature is set to yes, on or 1, the dialog window is centered on the screen, the dialogLeft and dialogTop features are omitted. If this feature is not set or set to no, off or 0, the dialogLeft and dialogTop features specify the position of the dialog. If none of the center, dialogLeft and dialogTop features are set, the dialog window is centered on the screen.

dialogHide : { yes|no | on|off | 1|0 }

Specifies whether the dialog needs to be hidden while printing or while the print preview is displayed. Default is no. Only available if the dialog is created from a trusted application.

edge : { sunken | raised }

Specifies the edge style of the dialog. Default is raised.

resizable : { yes|no | on|off | 1|0 }

Specifies whether the dialog is resizable. Default is no.

scroll : { yes|no | on|off | 1|0 }

Specifies whether displaying scrollbars is allowed for the dialog. Default is yes.

status : { yes|no | on|off | 1|0 }

Specifies whether the dialog has a status bar. Default is yes for untrusted and no for trusted dialogs.

unadorned : { yes|no | on|off | 1|0 }

Specifies whether border window chrome is removed. Default is no. Only available if the dialog is created from a trusted application.

Return value:

Returns the value of the returnValue property of the dialog window.

Example HTML code 1:

This example creates a modal dialog and communicates 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 {
                    // for similar functionality in Opera, but it's 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 the 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>