3

私には特別な問題はありませんが、私の人生では、何が間違っているのかわかりません。

一連のセクションを持つページがあります。セクションの一部は小さな画像です。画像がクリックされたときに、カスタム コントロールを表示したい。コントロールが簡単であることを示すには、z-index を少し高く設定して、コントロールがすべての上に表示されるようにします。

ただし、ユーザーはコントロールの背後にあるセクションを操作できます。

それを止めるために、「毛布」を追加しました。基本的に、次の CSS (jQuery 構文) を使用したドキュメントのサイズである div -

{
  position: 'absolute',
  top: 0,
  left: 0,
  width: '100%',
  height: $(document).height(),
  display: 'none',
  zIndex: 1,
  backgroundColor: '#FF0000'
};

ええ...背景が赤なので、テスト用に表示できます。不透明度を 0.1 (ライト ブラー) に設定します。次に、カスタム コントロールの z-index を 2 に設定して、ブランケットの上に配置します。

これは、FireFox、Chrome、および Safari では完全に機能しますが、IE では機能しません。

カスタム コントロールはブランケットの子ではありません。

目標は、次のドキュメントをブランケットでカバーし、ブランケットの上にコントロールを置いて操作できるようにすることです。これは、IE を除くすべてのブラウザーで得られるものです。すなわち...それはコントロールで文書化され、両方がブランケットで覆われています。

答え

scunliffeが最も近かった (リンクできないコメントで回答)。カスタム コントロールは、相対的に配置された div 内にあります (実際にはいくつか下にあります)。ブランケットは体の端に単に追加されました。したがって、それは相対的に配置された div の外にあり、独自の z-index スタックを開始しました (ここに記載されているように)。IE 6/7 はこの点で壊れているため、z-index を何に設定しても、常にブランケットより下になります。

そこで、相対的に配置された div 内の最初の子になるように毛布を移動しました。これはまだ 100% 完了したわけではありません。スクロールすると (このソリューションでは停止できません)、ブランケット div は表示されるコンテンツの高さだけになるからです。コンテンツの完全な高さ (可視および非可視) を取得する方法を理解する必要があります。

4

6 に答える 6

1

はるかに高い z-index を含めることを習慣にしてください。以下を使用します。

z-index:20000;

そしてもちろん、カスタム コントロールの z-index を上げます。高い z-index により、同様の問題が修正されました。

于 2008-12-17T20:48:29.747 に答える
1

scunliffeが最も近かった (リンクできないコメントで回答)。カスタム コントロールは、相対的に配置された div 内にあります (実際にはいくつか下にあります)。ブランケットは体の端に単に追加されました。したがって、それは相対的に配置された div の外にあり、独自の z-index スタックを開始しました (ここに記載されているように)。IE 6/7 はこの点で壊れているため、z-index を何に設定しても、常にブランケットより下になります。

そこで、相対的に配置された div 内の最初の子になるように毛布を移動しました。これはまだ 100% 完了したわけではありません。スクロールすると (この解決策では止められません)、ブランケット div は表示されるコンテンツの高さだけになるからです。コンテンツの完全な高さ (可視および不可視) を取得する方法を理解する必要があります。

于 2009-01-14T01:16:30.460 に答える
1

私もこれには困りました。貫通できないシールドを作成する唯一の方法は、DIV の背景に画像を配置することでした (透明な GIF が役に立ちました)。そして、コントロールへの移動を防ぐために、キーボード イベントをインターセプトする必要があります。

于 2008-12-17T21:10:20.717 に答える
0

カスタムコントロールが何で構成されているかについては言及していませんが、カスタムコントロールに選択要素がある場合、これによりieでモーダルの問題が発生します(ie7で問題を修正したかどうかを思い出せません)。とにかく、この情報は問題の解決に役立つ場合があります。オーバーレイを通して表示されないようにするには、iframe shim が必要です。これを実行しようとしているスクリプトがたくさんあります。

より詳しい情報

そしてここ

于 2008-12-17T20:57:00.010 に答える
0

プロジェクトで不透明度を設定する方法は次のとおりです。

.SomeStyle
{
filter:alpha(opacity=10);
-moz-opacity:.10;
opacity:.10;
}

IE 6 と 7 および FF 2 と 3 で問題なく動作します。Safari でも動作すると思います。

于 2008-12-17T20:42:16.030 に答える
0

帽子を投げ入れるだけで...

少し前にこれを実装したばかりで、次を使用しました：

div#shade-box {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0.7;
    filter: Alpha(opacity=70);
}

明らかに、背景色を変更または削除できます。この div を Javascript を介して DOM に追加していたので、z-index について心配する必要はありませんでした。

FF および IE7 で動作することが知られています。

于 2008-12-17T21:28:09.323 に答える