打開彈出窗口，並在用戶單擊彈出窗口之外的任何位置時將其隱藏

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小提琴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-> show in javascript function

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

就這樣。 謝謝。