画像をクリックすると背景が暗くなり、それがポップアウトする方法

Question

現在、私は現在ウェブサイトを作っていて、画像を設定しているので、クリックすると大きくなり、ページの中央に入ります。これは正常に動作しますが、（大きな画像の他に）ウェブページの残りの部分を少し暗くしようとしています。

あなたはFacebookの画像を開くと、あなたが見ることができるならば、この例は、ページの残りの部分が黒くなりして、不透明度が約0.5

これは私が関数内のために持っているコードの一部をあるあります

$(this).click(function(evt){ 
        $("#bigimg").attr("src", imageURL); 
        $("#bigimg").attr("style", "display:block"); 

        evt.preventDefault(); 

        $('body').css('opacity', '0.5'); 
        $('#bigimg').css('opacity', '1'); 

       }); 

私は絵（#bigimgが）それが通常であるほど明るく滞在したい場合は、このWebページ全体が0.5不透明になり実行jqueryの

。

ご協力いただければ幸いです！

Answer 1

ボディに不透明度を適用すると、ボディに不透明度が適用され、その中のすべてに適用されます。あなたは

var mask = $('<div class="bgmask"></div>'); 
$('body').append(mask); 

より高いZインデックスを使用して画像を追加

、ご希望の不透明度をdiv要素を作成し、あなたの体にそれを追加する必要がCSS：

.bgmask { 
    background: #000; 
    opacity: 0.5; 
    z-index: 100; 
    content: ' '; 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
}