html - 如何制作可滚动的弹出框？

Question

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

当我单击“创建过程”按钮时，我无法在灯箱中滚动。

灯箱有一个固定的位置，因为当我使用 absolute 时，背景会乱七八糟。灯箱是白色背景。

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

我添加了 overflow auto，所以在较小的屏幕上，灯箱将是一个滚动条。

如果这就是您想要的，请告诉我。

更新:

要仅在 #lightbox 上滚动，则可以向 CSS 添加自动溢出。

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