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

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

createPopup method (window)

Browser support:

Creates a popup window object.

Popup windows are typically used for displaying drop-down menus or custom tooltips. It is a simple window (without borders, scrollbars, title bar, etc.). The popup window is not shown initially; use the show method to display the window.

Syntax:

object.createPopup ([argument]);

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

Parameters:

argument

Optional. Argument is reserved.

Return value:

Returns the newly created popup window object.

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>