how to create a scrolling popup in css
// CSS Code
.popup-box {
padding: 40px;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow-y: auto;
z-index: +2;
background-color: rgba(0, 0, 0, 0.411);
}
.popup-box-inner{
overflow: auto;
width: 100%;
background-color: #fff;
box-sizing: border-box;
padding: 20px 0;
}
button{
position: fixed;
z-index: +4;
}
// REACT Code
const [open, setOpen] = useState(false)
function handleOpen(){
if (!open) {
document.body.style.overflow = 'hidden'
}
setOpen(!open)
}
return(
<div>
<div class="popup-box" style={{ display: open ? 'flex' : 'none' }}>
<div class="popup-box-inner">
<h1>Hello I am a popup</h1>
</div>
</div>
<button onClick={handleOpen}>Toggle Popup</button>
</div>
)