javascript - 打开弹出窗口并在用户单击弹出窗口外的任何位置时将其隐藏

Question

我试图在我的 Java Web 应用程序中的父窗口上显示一个弹出窗口。当用户单击父窗口中的链接时，弹出窗口必须出现在父窗口上。在弹出窗口中，用户可以选择从数据库(休眠)中获取的任何值。之后，当用户在弹出窗口内单击“确定”按钮或在弹出窗口外或父窗口内的任意位置单击时，弹出窗口将隐藏。

Answer 1

创建一个包装元素，其 z-index 高于您的父窗口，但低于您的弹出窗口。

“单击”该元素的 addEventListener。

如果目标 === 该元素，则关闭弹出窗口并删除该元素本身。

这将处理您“在弹出窗口之外”的点击。

其余的应该由您窗口的事件处理。

编辑

样式

        html {
            height: 100%;
        }

        body {
            position: relative;
            height: 100%;
            z-index: 1;
        }

        #overlay {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: rgba(0,0,0,0.25);
            z-index: 99;
        }

        #popup {
            position: absolute;
            width: 20%;
            height: 20%;
            top: 40%;
            left: 40%;
            background: rgb(220,220,220);
            box-shadow: 2px 2px 3px rgba(0,0,0,0.5);
            z-index: 100;
        }

html

<input id="popupbutton" type="button" value="pop me up" />

javascript

<script>
        document.getElementById('popupbutton').addEventListener('click', loadPopup, true);

        function loadPopup(e) {
            e.preventDefault();
            e.stopPropagation();

            var overlay = document.createElement('div');
                overlay.id = 'overlay';
                overlay.addEventListener('click', closePopup, true);

            var popup = document.createElement('div');
                popup.id = 'popup';

            document.body.appendChild(overlay);
            document.body.appendChild(popup);

            function closePopup(e) {
                e.preventDefault();
                e.stopPropagation();

                // only close everything if click was on overlay
                if (e.target.id === 'overlay') {
                    document.body.removeChild(popup);
                    document.body.removeChild(overlay);
                }
            }
        }
    </script>

编辑 2链接到工作 JS fiddle http://jsfiddle.net/md063bfr/1/