Question

我目前有一个影响我的按钮的灯箱效果。现在它工作正常，唯一的问题是背景被认为是深黑色。然而，它只影响一定的面板而不是整个身体。

所以codepen Example

一切都变黑了。这是我想要做的，但是在我的实际上它在某个部分实际上是黑色的。

HTML：

<div class="panel panel-default">
        <div class="panel-heading"><b>Product</b></div>
            <div class="panel-body">
                <div class="pull-left col-xs-12 col-sm-4">
                    <a href="#">
                        <img class="img-thumbnail img-responsive" src="Image/coconut.jpg">
                    </a>
                    <a id="show-panel" class="btn btn-success btn-block btnrec" href="#">View product</a>
                    <div id="lightbox-panel">
    <h2>Lightbox Panel</h2>
    <p>You can add any valid content here.</p>
    <p align="center"><a id="close-panel" href="#">Close this window</a></p>
</div>
<div id="lightbox"></div>
                </div>

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:700px;
  height: 700px;
  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);
  })
});

Fiddle

所以再一次只想让所有东西都变成黑色并关注灯箱面板

谢谢

如何获取灯箱的背景来填充整个页面

0 个答案: