javascript弹出图片，背景变暗

最新推荐文章于 2024-06-30 16:07:35 发布

原创最新推荐文章于 2024-06-30 16:07:35 发布 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #function #服务器 #div #url

JavaScript 专栏收录该内容

52 篇文章

订阅专栏

本文介绍了一个使用纯JavaScript实现的图片预览弹窗功能。通过简单的JS代码，可以在点击小图时弹出一个全尺寸的图片预览窗口，并提供关闭选项。此方法适用于不需要额外依赖库的轻量级图片展示场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS文件：
<script language="javascript" type="text/javascript">
function zC(url){
var picurl="../"+url;
var cWidth,cHeight;
cWidth = screen.width;
cHeight = screen.height;
var cObj = document.createElement("div");
cObj.setAttribute("id","cdiv");
cObj.style.position = "absolute";
cObj.style.top = 0;
cObj.style.left = 0;
cObj.style.backgroundColor = "#CCCCCC";
cObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
cObj.style.width = cWidth +"px";
cObj.style.height = cHeight + "px";
cObj.style.zIndex = "1000";
document.body.appendChild(cObj);
var iObj = document.createElement("img");
iObj.setAttribute("id","cimg");
iObj.style.position = "absolute";
iObj.style.top = "50%";
iObj.style.left = "50%";
iObj.style.width = "500px";
iObj.style.height ="400px";
iObj.style.marginLeft = "-220px" ;
iObj.style.marginTop = -155+"px";
iObj.style.textAlign = "center";
iObj.src = picurl;
iObj.style.zIndex = "1001";
iObj.style.cursor = "hand";
iObj.onclick = function(){
document.body.removeChild(iObj);
document.body.removeChild(cObj);
}
document.body.appendChild(iObj);
}