Setting an HTML element as scrollable

Question

Working with a lightbox effect at the moment. The problem is my lightbox has a lot of text inside it. Problem is, I cant figure out how to make a scroll function inside so the user can scroll down the element.

CSS

/* Lightbox background */
#lightbox {
  display:none;
  background: rgba(0,0,0,0.8);
  position:absolute;
  top:0px;
  left:0px;
  min-width:100%;
  min-height:100%;
  z-index:1000;
}
/* Lightbox panel with some content */
#lightbox-panel {
  display:none;
  position:fixed;
  top:100px;
  left:50%;
  margin-left:-200px;
  width:400px;
  background:#FFFFFF;
  padding:10px 15px 10px 15px;
  border:2px solid #CCCCCC;
  z-index:1001;
}

JS

$(document).ready(function(){
  $("a#show-panel").click(function(){
    $("#lightbox, #lightbox-panel").fadeIn(300);
  });
    $("a#close-panel").click(function(){
    $("#lightbox, #lightbox-panel").fadeOut(300);
  })
});

My example

Thanks for the help!

Answer 1

Worked on this and what you needed for your situation is just have it to position fixed.. Get rid of that and it should work..

CSS code:

    body{
  margin:150px 0 0 0;
  text-align:center;
  background: #f1e7b0;
}
h2{
  font-size: 32px;
}
a{
  text-decoration: none;
  color: #222222;
  font-size: 18px;
}

/* Lightbox background */
#lightbox {
  display:none;
  background: rgba(0,0,0,0.8);
  position:absolute;
  top:0px;
  left:0px;
  min-width:100%;
  min-height:100%;
  z-index:1000;
}
/* Lightbox panel with some content */
#lightbox-panel {
 display:none;
  position:absolute;
  top:100px;
  left:50%;
  margin-left:-200px;
  width:400px;
  background:#FFFFFF;
  padding:10px 15px 10px 15px;
  border:2px solid #CCCCCC;
  z-index:1001;
}
#lightbox-panel{
    overflow: scroll;
}
body{
    overflow: scroll;
}

Link : http://jsfiddle.net/9LFKV/158/

Fixing background color

To fix the background color, i just attached a $.css({}) in the JS File and it worked :D. Here is the code:

$(document).ready(function(){
  $("a#show-panel").click(function(){
    $("#lightbox, #lightbox-panel").fadeIn(300);
        $('html').css('background-color', 'rgba(0,0,0,0.8)')
  });
    $("a#close-panel").click(function(){
    $("#lightbox, #lightbox-panel").fadeOut(300);
  })
});

JSFiddle

Answer 2

You had the position attribute for the lightbox (background) and the lightbox-panel switched. They should be:

#lightbox-panel {
  ...
  position:absolute;
  ...
}

and

#lightbox {
  ...
  position:fixed;
  ...
}

Answer 3

#lightbox-panel {
position:absolute;
}