3

私はうまく機能するライトボックスコードを持っています! ボタンをクリックすると、黒い画面とコンテンツ ボックスのオーバーレイが表示されます。white_contentユーザーがページをどれだけ下にスクロールしたかに基づいて、ライトボックスまたは以下の CSS を画面に表示する方法があるかどうかを知りたいです。

white_content基本的には、表示可能な画面の真ん中に表示させたいと思っています。

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

  • 最初の画像は、ページの中央に配置されたライト ボックスを示しています。これが私が望むものです。ページの一番下までスクロールします。

    また、 http://www.green-panda.com/solutions.htmlで実際に動作しているのを見ることができます。

  • 2 番目の画像は、ライト ボックスがページ上でほとんど見えないことを示しています。ご覧のとおり少しだけ上にスクロールしました。赤いアウトラインは、その位置にいるときにライト ボックスを移動させたい場所です。

画面の記録は、この質問をより明確にするのに役立ちますか?

私のコードはすべて以下に提供されています：

ライトボックス用の私の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 に答える