Answers for "how to create a scrolling popup in css"

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>
)