1. ホーム
  2. 質問と答え
  3. 本当にシンプルなライトボックスを組み込もうとしています。スクロールの中心にどうやって留まるのですか？

本当にシンプルなライトボックスを組み込もうとしています。スクロールの中心にどうやって留まるのですか？

2011-09-13 7 views
1

非常に古いサイトを新しいサイトとして起動する作業は、他の場所に構築されており、スーパーシンプルライトボックスタイプのディスプレイを組み込みたいが、動作させる方法がわからない。ここで本当にシンプルなライトボックスを組み込もうとしています。スクロールの中心にどうやって留まるのですか？

、そのままページです：

http://www.onboardtraining.co.uk/johnboyce

それは、このページからコードを中心に構築されたJavaScript関数を呼び出し、右側の車の3行をクリック：

http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/

を

暗い背景レイヤーは、CSSコード内でこれを示し、背景レイヤーとコンテナレイヤーの両方が画面に固定されていなくても、100％に完全に展開されません訪問者が少しスクロールした後、サムネイルをクリックすると、レイヤーがページの上に表示され、ユーザーがスクロールしようとした場合と同じように画面を部分的に覆うだけです。

最後に、IE、FF、Chromeでデモコードが正常に機能しますが、iPhoneではライトボックスが左側に表示されます。

一瞬で物事のCSSの周りに自分の道を学び、暗黒時代から出てくる、多くの支店を持つ大規模な問題のため申し訳ありません:)

おかげで、

のRik

編集 - 外部のjqueryプラグインを使用したくありません。

出典

2011-09-13 Rik

答えて

2

これが最も簡単な方法です：IE6以外のすべてのブラウザで

.black_overlay { 
    position: fixed; 
    _position: absolute; 
}

position: fixedis supported - もはやほとんどのウェブサイトに関連する支援います。 _position: absoluteはIE6にのみ適用され、そのブラウザでページが中断されます。

ウィンドウのサイズにインテリジェントにサイズ変更することはないので、白いボックスはそのままにしてください（position: fixedにしないでください）。

あなたの質問のiPhoneの部分についてのアイデアはありません。それはQuirks Modeが発生するため、良くない

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

：

まず、あなたのDOCTYPEを更新する必要があります。 Internet Explorerでは特に、Quirksモードでは多くの機能が動作しないか、完全に機能しなくなります。あなたのDOCTYPEは、これに更新します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

出典

2011-09-13 09:04:50 thirtydot

+0

:)感謝を使用したくない正しい方向に私を指すように時間を割いていただきありがとうございます:)あなたはおそらく言うことができます私は白いボックスをスクロールさせる方法/ページの中央に現れてそこにとどまっていますか？多くのおかげで、Rik – Rik

+0

ようこそ。あなたはそれについて新しい質問をするべきです（あなたの 'picpopper'関数とあなたのサイトへのリンクも含めてください）。あなたの現在の質問の接線から遠すぎます。とにかく、私はJavaScriptの帽子を今は持っていません。 – thirtydot

関連する問題

 関連する問題