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代码：

  $( document ).ready(function(){
        var mymap =  L.map('map_div', {
          zoomControl: true,
          center: [40.4000, -3.7167],
          zoom: 6
        });

        var basemap = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
        }).addTo(mymap);
    });

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

修复背景颜色

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

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

JSFiddle

Answer 2

您有灯箱（背景）的位置属性和灯箱面板已切换。他们应该是：

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

和

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

Answer 3

#lightbox-panel {
position:absolute;
}

将HTML元素设置为可滚动

3 个答案:

修复背景颜色