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

You are here: Reference > JavaScript > client-side > dialog > methods > show (popup)

show method (popup)

Browser support:

Displays the current popup window.

Popup windows are typically used for displaying drop-down menus or custom tooltips. When the document loses focus (e.g. the user clicks outside the browser window or inside the browser window but outside the document) popup windows are automatically closed. Popup windows can also be displayed outside the browser window.

Use the createPopup method to create, the show method to display, and the hide method to close a popup window.

Syntax:

object.show (X, Y, width, height [, relativeToElement]);

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

Parameters:

Required. Integer that specifies the horizontal position of the popup window, in pixels.

Required. Integer that specifies the vertical position of the popup window, in pixels.

width

Required. Integer that sets the width of the popup window.

height

Required. Integer that sets the height of the popup window.

relativeToElement

Optional. Reference to the element that the coordinates specified by the X and Y parameters are relative to. If not set, the coordinates are relative to the upper-left corner of the browser's window.

Return value:

This method has no return value.

Example HTML code 1:

This example shows how to create a popup window in Internet Explorer:

<head>
    <script type="text/javascript">
        var popupWindow = null;
        function MakePopup () {
            if (window.createPopup) {        //Internet Explorer
                if (!popupWindow) {
                    popupWindow = window.createPopup ();
                    var popupBody = popupWindow.document.body;
                    popupBody.style.backgroundColor = "lightblue";
                    popupBody.style.border = "solid black 1px";
                    popupBody.innerHTML = "Click outside to close.";
                }
                popupWindow.show (100, 100, 150, 25, document.body);
            }
            else {
                alert ("Your browser does not support this example!");
            }
        }
    </script>
</head>
<body>
    <input type="button" value="Create a popup window!" onclick="MakePopup ();"/>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example implements a cross-browser solution for the previous example, but the popup windows created by this example are a little bit different in other browsers than Internet Explorer. When the document loses focus (e.g. the user clicks outside the browser window or inside the browser window but outside the document) popup windows are closed in Internet Explorer. Another difference is that popup windows can be displayed outside the browser window in Internet Explorer.

<head>
    <script type="text/javascript">
        var popupWindow = null;
        var popupIsShown = false;
        
        function MakePopup (event) {
            if (window.createPopup) {        //Internet Explorer
                if (!popupWindow) {
                    popupWindow = window.createPopup ();
                    var popupBody = popupWindow.document.body;
                    popupBody.style.backgroundColor = "lightblue";
                    popupBody.style.border = "solid black 1px";
                    popupBody.innerHTML = "Click outside to close.";
                }
                popupWindow.show (100, 100, 150, 25, document.body);
            }
            else {
                if (!popupIsShown) {
                    if (!popupWindow) {
                        popupWindow = document.createElement ("div");
                        popupWindow.style.backgroundColor = "lightblue";
                        popupWindow.style.border = "solid black 1px";
                        popupWindow.style.position = "absolute";
                        popupWindow.style.width = "150px";
                        popupWindow.style.height = "25px";
                        popupWindow.style.top = "100px";
                        popupWindow.style.left = "100px";
                        popupWindow.innerHTML = "Click outside to close.";
                    }

                    document.body.appendChild (popupWindow);
                    window.addEventListener ('click', RemovePopup, true);
                    popupIsShown = true;

                        // to avoid that the current click event propagates up
                    event.stopPropagation ();
                }
            }
        }

        function RemovePopup (event) {
            if (popupIsShown) {
                var relation = popupWindow.compareDocumentPosition (event.target);
                var clickInPopup = (event.target == popupWindow) || (relation & Node.DOCUMENT_POSITION_CONTAINED_BY);
                if (!clickInPopup) {
                    document.body.removeChild (popupWindow);
                    window.removeEventListener ('click', RemovePopup, true);
                    popupIsShown = false;
                }
            } 
        }
    </script>
</head>
<body>
    <input type="button" value="Create a popup window!" onclick="MakePopup (event);"/>
</body>