弹出图像时模糊背景

Question

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

CSS

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

#popup{  /*NEW*/
position: fixed;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
padding: 50px;
visibility: hidden;
opacity: 0;
transition: 0.5s;
}

#popup.active{ 
width: 650px;
top: 53%;
visibility: visible;
opacity: 1;
transition: 0.5s;
}

HTML

<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>

JavaScript

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

我尝试将相同的id="blur" 添加到页脚，但问题是它仅适用于一个<div>。 我还尝试为 let say `class="footer" 添加单独的 css 代码，但它不起作用。

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

我也尝试将 id 标签移动到该部分，但这只会模糊标题而不是其余部分。

Answer 1

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

我所做的更改：

CSS 将#blur 更改为.blur

JS - 该函数获取所有具有 .blur 类的元素并添加或删除类 .active

HTML - 为所有需要模糊的元素添加了 .blur 类。

在一个文档中，您可以拥有多个具有相同名称的类，但您只能拥有一个具有唯一 ID 的元素！这就是我将blur 从 ID 更改为 CLASS 的原因

function toggle() {
    var blur = document.getElementsByClassName('blur');
   
    for (var i = 0; i < blur.length; i++) {
        blur[i].classList.toggle('active');
    }

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

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

#popup {
    /*NEW*/
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    padding: 50px;
    visibility: hidden;
    opacity: 0;
    transition: 0.5s;
}

#popup.active {
    width: 650px;
    top: 53%;
    visibility: visible;
    opacity: 1;
    transition: 0.5s;
}

<section class="port" id="pLink">
    <div class="heading blur">
        <h2>Title</h2>
        <p>Description.</p>
    </div>
    <div class="content2 blur">
        <div class="pBox">
            <a href="#" class="anchor" onclick="toggle()" id="img-1">
                <img src="https://blog.54ka.org/wp-content/uploads/2020/09/horse-galloping-close-up-action-photography_by_54ka-165x165.jpg">
                <div class="overlay">
                    <h5>Image Description</h5>
                </div>
            </a>
        </div>
    </div>
    <div id="popup">
        <a href="#" class="anchor" onclick="toggle()">
            <img src="https://blog.54ka.org/wp-content/uploads/2012/07/horses_XI_01_by_54ka.jpg" class="img-1">
    </div>
</section>


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