根據頁面滾動位置調整彈出窗口位置，並通過點擊關閉。

所以我知道有很多關於這些問題的提要，我已經通過其中大部分，但我無法使它工作。我真的迷失了.js。根據頁面滾動位置調整彈出窗口位置，並通過點擊關閉。

因此，我使用非常簡單的彈出式窗口，通過選擇主題的標題來提供有關主題的更多內容。我用一個簡單的CSS代碼：

.black_overlay { 
    display: none; 
    position: absolute; 
    top: 0%; 
    left: 0%; 
    width: 100%; 
    height: 100%; 
    background-color: black; 
    z-index: 1001; 
    -moz-opacity: 0.8; 
    opacity: .80; 
    filter: alpha(opacity=80); 
} 
.white_content { 
    display: none; 
    position: absolute; 
    left: 20%; 
    top:25%; 
    width: 70%; 
    height: auto; 
    padding: 10px; 
    border: 6px solid #ed7d86; 
    background-color: white; 
    text-align: center; 
    z-index: 1002; 
    overflow: auto; 
}

和HTML：

<div class="flex-item"> 
    <a href="javascript:void(0)" onclick="document.getElementById('TITLE').style.display='block'; 
document.getElementById('fade').style.display='block'">TITLE</a> 
    <div id="TITLE" class="white_content">Something else about TITLE. 
<a href="javascript:void(0)" onclick="document.getElementById('TITLE').style.display='none'; 
document.getElementById('fade').style.display='none'">Close</a></div> 
</div>

此代碼的偉大工程，直到我嘗試它是在這種情況下，顯然框繼續顯示在頁面上較低的元素在機頂和左側位置，這意味着我必須回滾才能看到它。如果我擺脫了頂部和左邊的條件，我最終會在網頁的某個角落隨機出現。

我還希望人們只需點擊black_overlay區域即可離開盒子。任何人都可以推薦一個可以處理我的代碼的修復程序？

來源

2017-09-03 Mela

好吧，我的問題沒有太大的成功。想讓你知道我將.white_content的位置改爲固定位置，並解決了定位問題。我仍然通過在框外單擊而不用更改所有代碼來關閉窗口。

來源

2017-09-06 06:58:10 Mela

根據頁面滾動位置調整彈出窗口位置，並通過點擊關閉。

回答

相關問題