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

You are here: Reference > JavaScript > client-side > dialog > objects > popup

popup object

Browser support:

Represents the window object of a popup box created with the createPopup method.

Popup windows are typically used to create drop-down menus or custom tooltips. They are simple windows without borders, scrollbars, title bar, etc.

Popup windows are not shown initially, use the show method to display them. A popup window is visible until it loses the active state (for example, the user clicks outside the popup window) or the hide method is invoked.

A popup window has a document object, which is a lightweight document object. The contents within a popup window can be manipulated similarly to the contents of a normal HTML document.

Syntax:

Methods that return the object:

•	window.createPopup ([argument])

Possible members:

Properties:

document

Returns a reference to the document object in a popup window.

isOpen

Returns a Boolean value that indicates whether the current popup window is displayed.

Methods:

hide

Closes the current popup window.

show

Displays the current popup window.

Example HTML code 1:

This example illustrates the use of the popup object:

<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 bit different in other browsers than in 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>