スクロール可能なポップアップボックスを作る方法は？

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; 
} 

オーバーフローオートを追加しました。小さい画面では、ライトボックスがスクロールします。

これがあなたの後だったのかどうか教えてください。

更新：

、あなたはあなたのCSSにオーバーフローオートを追加することができる唯一の#lightboxのスクロールを持っています。

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