javascript - 将 HTML 元素设置为可滚动

Question

目前正在使用灯箱效果。问题是我的灯箱里面有很多文字。问题是，我不知道如何在内部制作滚动功能，以便用户可以向下滚动元素。

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

感谢您的帮助!

Answer 1

在这方面工作，你需要为你的情况做的只是让它固定位置..摆脱它，它应该工作..

CSS 代码:

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

链接:http://jsfiddle.net/9LFKV/158/

修复背景色

为了修复背景颜色，我只是在 JS 文件中附加了一个 $.css({}) 并且它起作用了:D。这是代码:

$(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