How to make scrollable pop up box?

Question

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

When I click on the button "Creation Process" I cannot scroll in the lightbox.

The lightbox has a fixed position because when I used absolute the background messes up. The lightbox is a white background.

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

Marcy

Please don't make more work for others by vandalizing your posts. By posting on the Stack Exchange (SE) network, you've granted a non-revocable right, under a CC BY-SA license, for SE to distribute the content (i.e. regardless of your future choices). By SE policy, the non-vandalized version is distributed. Thus, any vandalism will be reverted. Please see: How does deleting work? …. If permitted to delete, there's a "delete" button below the post, on the left, but it's only in browsers, not the mobile app. – Progressive

Answer 1

try this code. Is this what you were after?

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

I have added overflow auto so on smaller screens the lightbox will be a scroll.

Let me know if this is what you were after.

Update:

To have a scroll on only the #lightbox then you can add overflow auto to your CSS.

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

Percaline

Thats nice but, I want the lightbox to be height: 100% and width: 100%. – Marcy

If you keep it at 100% then just add overflow auto so it will have its own scroll when the content is bigger than the box. – Percaline

I have updated my answer as well so anyone in future can see what happened where and thank you for the 1 up. – Percaline

Answer 2

If you need only vertical scroll, use 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;
}

Grantgranta