3

我有一个很好用的灯箱代码！您单击一个按钮，然后会出现黑屏和内容框的叠加。white_content我想知道是否有一种方法可以根据用户向下滚动页面的距离使灯箱或下面的 CSS 出现在屏幕上。

基本上，我想让它white_content出现在可视屏幕的中间。

http://s1309.beta.photobucket.com/user/mievan123/library/Light%20Box

  • 第一张图片显示了以页面为中心的灯箱，这就是我想要的。我一直滚动到页面底部。

    您也可以在http://www.green-panda.com/solutions.html看到它的实际效果

  • 第二张图片显示了页面上几乎看不到的灯箱。如您所见，我向上滚动了一点。当我在那个位置时，红色轮廓是我希望灯箱移动到的位置。

屏幕录制是否有助于使这个问题更清楚？

下面提供了我的所有代码：

我的灯箱 CSS

.black_overlay{
    display: none;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
}
 
.white_content {
    display: none;
    position: absolute;
    top: 50%;
    left: 25%;
    width: 50%;
    height: 50%;
    padding: 16px;
    border: 16px solid green;
    background-color: white;
    z-index:1002;
    overflow: auto;
}

打开灯箱的脚本

<p align="right">
    <a href="javascript:void(0)" 
       class="button" 
       onclick="document.getElementById('light').style.display='block';
                document.getElementById('fade').style.display='block'"
    >Contact Us</a>
</p>

实际的灯箱编码

<div id="light" class="white_content">
    This is the lightbox content. 
    <a href="javascript:void(0)" 
       onclick = "document.getElementById('light').style.display='none';
                  document.getElementById('fade').style.display='none'"
    >Close</a>
</div>
<div id="fade" class="black_overlay"></div>

JSFiddle

4

2 回答 2

5

您不能以百分比为中心的宽度和高度（至少在不使用 JS 的情况下）。

但是，您可以设置静态高度和宽度并将其居中，如下所示：

使用top: 50%; left: 50%;和静态，负上边距和左边距，应该是元素宽度/高度的一半。

.white_content {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    margin: -182px 0 0 -182px;
    width: 300px;
    height: 300px;
    padding: 16px;
    border: 16px solid green;
    background-color: white;
    z-index: 1002;
    overflow: auto;
}

JSFiddle

于 2013-02-12T01:19:26.477 回答
0

我在这里为您创建了一个演示。我相信这将帮助你实现你想要的。

以下是我在演示中使用的代码：

    /* This parent can be any width and height */
.block {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}
于 2013-02-12T01:27:55.670 回答