jquery - 单击图像并弹出时如何使其余背景变暗

嘿，即时通讯目前正在建立一个网站，并且我已经设置了图片，因此当您单击它们时，它们会变大并进入页面的中心。这可以正常工作，但是我正在尝试使网页的其余部分（除了大图）变得更暗。

例如，如果您打开一张Facebook图片，然后可以看到页面的其余部分变成黑色并且不透明度约为0.5

这是我在jQuery函数中拥有的一些代码

$(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）保持其通常的亮度时，整个网页的透明度变为0.5。

任何帮助将不胜感激！

最佳答案

将不透明度应用于身体将其应用于其中的所有内容。您需要创建具有所需不透明度的div并将其添加到您的身体，然后添加具有更高z索引的图像

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

CSS：

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

关于jquery - 单击图像并弹出时如何使其余背景变暗，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36850540/