javascript - jQuery.css本体の不透明度

Question

ユーザーがクリックするたびにポップアップボックスに詳細が表示されるニュースタブがありますが、背景または本文タグ自体を暗くしたいので、次のように書きました。

$("#read").click(function(){
    $("#pbox").fadeIn('slow');
    $("body").css({"opacity": "0.5"});
});

ただし、ボックス自体も暗くなります。ボックスにこのコマンドを無視させる方法はありますか？それとも別の方法がありますか？

Answer 1

本文には#pboxが含まれているため、ボックス自体は、適用した50％の不透明度の対象になります。より良い方法は、ウィンドウ全体に半不透明なdivをオーバーレイしてから、その上に#pboxを配置することです。

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fff;
    width: 100%;
    height: 100%;
    display: none;
}

#pbox {
    z-index: 1;
}

つまり、ここでは、すべてのコンテンツに白い#overlay divが50％の不透明度で表示されています。その上には、上に表示されるようにz-indexが指定された#pboxがあります。

jQueryコードは次のようになります。

$("#read").click(function(){
    $("#pbox").fadeIn('slow');
    $("#overlay").show().css({"opacity": "0.5"});
});

Answer 2

残念ながら、ありません。ポップアップはbodyタグ内にあるため、不透明度の変更に含まれます。

これを行う唯一の方法は、体全体を覆い半透明のオーバーレイレイヤーを作成し、その上にポップアップを配置することです。