Javascript 弹出图像时模糊背景

我试图模糊背景，当我点击一个图像，它弹出。 我已经有了它，它模糊了页面的一部分。但是，您可以看到该部分之外的任何内容，而不会模糊

CSS

HTML

我尝试将相同的

id=“blur”

添加到页脚，但问题是它只适用于一个

。 我还尝试为let say`class=“footer”添加一个单独的css代码，但不起作用

.footer#blur.active{ 
 filter: blur(20px);
 pointer-events: none;
 user-select: none;}

---

我还尝试将id标记移动到部分，但这只会使标题模糊，而不会使其余部分模糊。

您所要做的就是为任何元素添加一个“模糊”类，以便在单击图像时获得效果

我所做的更改：

将CSS中的模糊更改为模糊

JS-该函数使用class

.blur

获取所有元素，并具有add或remove class

.active

HTML-向所有需要模糊的元素添加类

.blur

在一个文档中，可以有许多同名的类，但只能有一个具有唯一ID的元素！这就是我将模糊从ID改为CLASS的原因

函数切换（）{
var blur=document.getElementsByClassName（'blur'）；
对于（变量i=0；i

.blur.active{
过滤器：模糊（2px）；
指针事件：无；
用户选择：无；
}
#弹出窗口{
/*新的*/
位置：固定；
最高：40%；
左：50%；
转换：翻译（-50%，-50%）；
宽度：600px；
填充：50px；
可见性：隐藏；
不透明度：0；
过渡：0.5s；
}
#弹出。激活{
宽度：650px；
最高：53%；
能见度：可见；
不透明度：1；
过渡：0.5s；
}

标题
描述

版权所有

Id应该是唯一的。试着把所有的东西都包在一个div里，只把那个div弄模糊。我试过了。它只会模糊包括弹出图像在内的所有内容。将弹出窗口从该分区中取出它对我不起作用。我做的每件事都一丝不苟。我遇到了两个问题。1.单击图像时，它不会执行任何操作。2.图片本身更大，不在我以前的位置，它覆盖了整个页面。我上传的示例中所有内容都正常！把JS代码放在页面底部是很重要的！我有js代码。不过，对我来说什么都不管用。起初，我的工作方式几乎完美，只是它只适用于一个div，而不适用于其他div。就像你提到的，只有一个id是唯一的。我在课堂上试过，但它甚至没有弹出和模糊任何东西。把你的项目上传到我能看到的地方1。你使用的JS代码不是我发布的！！！2.不能以这种方式使用类->

必须是

。这是乍一看。。。请检查您的错误代码！

<section class="port" id="pLink">
    <div class="heading" id="blur">
        <h2>Title</h2>
        <p>Description.</p>
    </div>
    <div class="content2" id="blur">
        <div class="pBox">
        <a href="#" class="anchor" onclick="toggle()" id="img-1">
            <img src="../mywebsite/img/bp.jpg">
            <div class="overlay">
            <h5>Image Description</h5>
            </div>
        </a>
        </div>
   </div>
   <div id="popup">
        <a href="#" class="anchor" onclick="toggle()">
        <img src="../mywebsite/img/bp.jpg" class="img-1">
   </div>
</section>

<div class="footer">
    <p>Copyright</p>
</div>

function toggle(){
var blur = document.getElementById('blur');
blur.classList.toggle('active');
var popup = document.getElementById('popup');
popup.classList.toggle('active');
}

.footer#blur.active{ 
 filter: blur(20px);
 pointer-events: none;
 user-select: none;}