当用户点击弹出窗口外的任何位置时，打开一个弹出窗口并隐藏它

Question

我试图在我的java Web应用程序的父窗口上显示一个弹出窗口。当用户单击父窗口中的链接时，必须在父窗口上显示弹出窗口。在弹出窗口中，用户可以选择从数据库中获取的任何值（休眠）。之后，当用户点击＆＃34; OK＆＃34;弹出窗口内的按钮或弹出窗口外的任何位置或弹出的父窗口中的隐藏。

Answer 1

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

addEventListener“click”到该元素。

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

这将处理“弹出窗口外”的点击次数。

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

修改

<强>样式

        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小提琴 http://jsfiddle.net/md063bfr/1/

Answer 2

你可以使用div。 前 -

<td> 
 <div align="center" id="show_sub" style="background-color:    pink;display:none;width:670px;height:370px;top:110px;overflow: auto;">
  your content here
</div>
</td>

然后设置display none-＆gt;在javascript函数中显示

function ShowDiv(){
            Popup.show('show_sub');
        }

这就是全部。 感谢名单。