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

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

showModelessDialog method (window)

Browser support:

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

The showModelessDialog method is similar to the window.open method, but while the showModelessDialog method creates a dialog, the open method creates a new application window.

A modeless dialog looks like a browser window, but behaves differently.

A modeless dialog is always displayed on top of its opener window (but the opener window can get focus as opposed to modal dialogs).
When a modeless dialog loses focus, its title bar becomes inactive, but the dialog stays above its opener window.
A modeless window does not appear as a new running application, because it is only a simple window that belongs to the opener application.

For example, the Find dialog in Internet Explorer is a modeless dialog.

Syntax:

object.showModelessDialog (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 modeless 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.

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

Specifies whether the Help icon is displayed in the dialog. Default is yes.

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 newly created window object.

Example HTML code 1:

This example creates a modeless dialog and communicates 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, "dialogWidth:300px; 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 a modeless dialog!</button>
    <br /><br />
    You can change the text color of the button with the selection list of the modeless 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>