javascript - 弹出图像时模糊背景
问题描述
当我单击图像并弹出它时,我试图模糊背景。我已经有了它,它模糊了页面的一部分。但是,您可以看到该部分之外的任何内容都不会模糊。
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 标签移动到该部分,但这只会模糊标题而不是其余部分。
解决方案
您所要做的就是向任何想要在单击图像时获得效果的元素添加“模糊”类。
我所做的更改:
将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>
推荐阅读
- php - 与哨兵一起使用时 Laravel 队列停止
- mysql - Spring Cloud 数据流未连接到 MySQL DB
- sql - 如何优化这个嵌套的 SQL SELECT 查询
- c# - DBcontext 在注册为 Scoped 时被共享
- linux - Android 内核 - 无法在内核点配置中激活 CONFIG_USB_ETH=y
- r - 计算每个用户的第一个日期和最后一个日期之间的差异时如何修复错误?
- git - 如何在 Azure DevOps 构建期间使用 PowerShell 脚本将构建工件推送到 Git 存储库?
- c - 为什么我不能运行 CLion 项目
- json - 如何解组这个 json 字符串
- python - python准备的stmt参数传递问题