如何製作可滾動的彈出框？

Question

https://codepen.io/anon/pen/dWaWor

當我點擊「創建過程」按鈕時，我無法在燈箱中滾動。

燈箱有一個固定的位置，因爲當我用絕對的背景混亂起來。燈箱是白色的背景。

<section id="lightbox"> 
    <i id="x" class="fa fa-times-circle"aria-hidden="true"></i> 
    <p class="large">hi</p> 
</section> 

>

#lightbox { 
    height:100%; 
    width:100%; 
    display: none; 
    position: fixed; 
    top:0; 
    left:0; 
    background: #fff; 
    z-index:1; 
} 

>

var btn_process = document.getElementById('creation-process'); 
var lightbox = document.getElementById('lightbox'); 
var x = document.getElementById('x'); 

btn_process.onclick = function() { 
    lightbox.style.display = 'block'; 
}; 

x.onclick = function() { 
    lightbox.style.display = 'none'; 
} 

Answer 1

試試這個代碼。這是你以後的事嗎？

#lightbox { 
    height: 80%; 
    width: 80%; 
    display: none; 
    position: fixed; 
    top: 6%; 
    left: 10%; 
    background: #fff; 
    z-index: 1; 
    overflow:auto; 
} 

我添加了溢出自動，所以在較小的屏幕上，燈箱將是一個滾動。

讓我知道這是你以後的樣子。

更新：

要對只有#lightbox滾動，那麼你可以溢出自動添加到您的CSS。

#lightbox { 
    height:100%; 
    width:100%; 
    display: none; 
    position: fixed; 
    top: 0%; 
    left: 0%; 
    background: #fff; 
    z-index: 1; 
    overflow:auto; 
}