如何制作可滚动的弹出框？答案

【问题标题】：How to make scrollable pop up box?如何制作可滚动的弹出框？
【发布时间】：2025-11-26 12:30:02
【问题描述】：

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

灯箱有一个固定的位置，因为当我使用绝对时，背景会混乱。灯箱是白色背景。

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

【问题讨论】：

请不要通过破坏您的帖子为他人增加工作量。通过在 Stack Exchange (SE) 网络上发帖，您已在 CC BY-SA license 下授予 SE 分发内容的不可撤销权利（即无论您未来的选择如何）。根据 SE 政策，分发非破坏版本。因此，任何破坏行为都将被撤销。请参阅：How does deleting work? …。如果允许删除，则帖子下方左侧有一个“删除”按钮，但仅在浏览器中，而不是移动应用程序中。

标签： html css responsive-design css-position

【解决方案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;
}

【讨论】：

很好，但是我希望灯箱的高度：100% 和宽度：100%。
如果你把它保持在 100%，那么只需添加溢出自动，这样当内容大于框时它就会有自己的滚动。
我也更新了我的答案，以便将来任何人都可以看到发生了什么，并感谢您的 1 up。

【解决方案2】：

如果你只需要垂直滚动，使用overflow-y: scroll !important;

#lightbox {
height:100%;
width:100%;
display: none;
position: fixed;
top: 0%;
left: 0%;
background: #fff;
z-index: 1;
overflow-y: scroll !important;

}

【讨论】：