javascript - HTML ページのカラーオーバーレイ?

Question

1 つの div を除いて、ページ全体に透明な色を重ねる方法はありますか? twitter.com の「つぶやきボックス」のようなものが必要です。ここでは、div が表示され、ページ上の他のすべてが、div が閉じられるまで「影に落ちる」ようになっています。HTML、CSS、Javascript、および jQuery だけでこれを行うにはどうすればよいでしょうか?

Answer 1

私はそれを行う方法の例を作成しました:

jsBin デモ

$('.box').click(function(){
  $('.box').css({zIndex:0});
  $(this).css({zIndex:101});
  $('#overlay').fadeTo(300,1);
});

$('#overlay').click(function(){
  $(this).stop().fadeTo(300,0,function(){
    $(this).hide();
  });
});

Answer 2

1 つの div を除いて、ページ全体に透明な色を重ねる方法はありますか?

はい。(これは「モーダル」と呼ばれます。「ライトボックス」、「モーダル」、「javascript ダイアログ ボックス」、およびおそらく他の多くの同様の用語を検索してダウンロードできます。)

100% の高さ、100% の幅、位置固定、上 0、左 0、およびいくつかの (高い) 数値の z-index を持つ div を作成します。

次に、別のボックスを作成し、その数値 + 1 の z-index を指定します。