gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 03:06:13 24 4
gpt4 key购买 nike

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

最佳答案

试试这段代码。这就是你想要的吗?

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

关于html - 如何制作可滚动的弹出框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44147516/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com