2

我正在尝试制作一个灯箱样式的 Jquery 函数。不幸的是，包含我想要弹出和放大.container的图像 div ( ) 的 div 有，所以我的弹出框和背景推子只占用该父 ( ) div 的宽度和高度，例如：.lightboxbackgroundposition:absolutez-index: 10.container

有谁知道解决这个问题的方法，以便我.lightboxbackground和.lightboxdiv 可以覆盖整个屏幕？

<div class='container'>

  <div class='lightboxbackground'>
    <div class='lightbox'>
      <img src='image.jpg'/>
    </div>
  </div>

</div>

.container {
  position: absolute;
  z-index:10;
  width: 200px;
  height: 200px;
}


.lightboxbackground {
    background-color:#000;
    opacity: 0.9;
    width: 100%;
    height: 100%;
    position:absolute;
    z-index: 11;
}

.lightbox {
  width: 500px;
  height: 500px;
  position:absolute;
  z-index: 12;
}
4

2 回答 2

2

如果你想覆盖整个屏幕：

.lightboxbackground {
    background-color:#000;
    opacity: 0.9;
    width: 100%;
    height: 100%;
    position:fixed;
    left:0;
    top:0;
    z-index: 11; //I would advise to change this to z-index:1000 (Note: .lightbox must also adjust to this)
}

FID：http: //jsfiddle.net/uH4MF/1/

于 2013-08-31T06:17:16.340 回答
0

.container可以说是他们的“参考框架”。后代的 100% 宽度和高度.container对他们来说意味着 200 像素。

此外，还有一种方法可以达到 100% 的高度。其中之一是明确定义heighton html，body因此您可以拥有此参考。

所以：

  • .container作为一个孩子的地方body

    <body>
  <div class="container">...

  • 删除.container'swidth和height

  • 添加以下样式：

    html, body, .container {height:100%};
于 2013-08-31T06:22:49.350 回答