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

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

hide method (popup)

Browser support:

Closes 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. Use the createPopup method to create, the show method to display, and the hide method to close a popup window.

Syntax:

object.hide ( );

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

Return value:

This method has no return value.

Example HTML code 1:

This example illustrates the use of the hide method.

<head>
    <script type="text/javascript">
        var popupWindow = null;
        
        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 or move the mouse over to close.";
                    popupBody.onmouseover = function () {popupWindow.hide ();};
                }
                popupWindow.show (100, 100, 150, 50, document.body);
            }
            else {
                alert ("Your browser does not support this example!");
            }
        }
    </script>
</head>
<body>
    <input type="button" value="Create a popup window!" onclick="MakePopup (event);"/>
</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 or move the mouse over to close.";
                    popupBody.onmouseover = function () {popupWindow.hide ();};
                }
                popupWindow.show (100, 100, 150, 50, 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 = "50px";
                        popupWindow.style.top = "100px";
                        popupWindow.style.left = "100px";
                        popupWindow.innerHTML = "Click outside or move the mouse over to close.";
                        popupWindow.addEventListener ('mouseover', RemovePopup, false);
                    }

                    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) {
                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>