0

2 つのメイン エリアを持つ Web ページがあります。「固定」された高さ約 40 ピクセルのヘッダーと、その下の残りのサイト コンテンツが入る領域 (サイトはまだ公開されていないため、残念ながらリンクを提供できません)。ただし、これと同じ種類のレイアウト:

www.wookmark.com

メイン コンテンツ エリアの特定の画像をクリックすると、Web サイト全体を覆う黒に近い (ただし不透明なので透けて見える) レイヤーを適用したいのですが、クリックした画像は変更されません。私がやろうとしていることの正確な例は、500px.comで使用されています。

画像をクリックすると、その周りの他のすべてが黒くなります (ページを下にスクロールしても)。

jqueryを介してBODY要素に背景を設定することでこれを達成しようとしましたが、半分だけ機能するようになったのは、何らかの理由で「固定」ヘッダーに適用されていませんでした.ページの残りの部分が変更されました。

これを達成する方法について何か提案はありますか？

4

1 に答える 1

0

ボディの最後に絶対位置を持つ div を使用する必要があります。そして、この div でイメージを「複製」します。

短い例:

CSS :

.layer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left : 0;
    background-color: black;
}

.layer img {
    margin: auto;
    margin-top: 50px;
}

Javascript:

$('img').click(function() {
   var layer = $('<div class="layer" />');
   $('body').append(layer);

   layer.append($(this).clone);
});

これは、基本を示すための短い例です。毎回同じレイヤーを再利用する必要があり、もちろん、レイヤーを非表示にする方法を提供する必要があります (たとえば、レイヤーをクリックすることによって)。

あなたを助けるために外部技術を使用したいかもしれません。Lightbox をご覧ください: http://lokeshdhakar.com/projects/lightbox2/

于 2012-12-13T10:03:36.983 に答える