javascript ImgBox透明遮罩层背景图片展示

ttx9n · 发表于 2009-7-21 23:15:40

javascript ImgBox透明遮罩层背景图片展示,就是增加了一个关闭按钮，比较实用。

<html> <head> <title>JavaScript Data Access Test</title> <script type="text/javascript"> function topDiv(el){ var elem=document.createElement("div"); elem.className="top-div"; //=========create img tag var img=document.createElement("img"); img.src=el.href; elem.appendChild(img); //=========create close DIV var closeDiv=document.createElement("div"); closeDiv.innerHTML="Close"; closeDiv.onclick=function(){ document.body.removeChild(elem); document.body.removeChild(alpha); } closeDiv.style.position="absolute"; closeDiv.style.right="2px"; closeDiv.style.top="2px"; closeDiv.style.fontSize="12px"; closeDiv.style.color="red"; closeDiv.style.border="1px solid #333"; closeDiv.style.backgroundColor="#eee"; closeDiv.style.cursor="hand"; elem.appendChild(closeDiv); //=========append the top DIV to body document.body.appendChild(elem); var alpha = alphaDiv(elem); } function alphaDiv(el){ var elem=document.createElement("div"); elem.className="alphaDiv"; elem.onclick=function(e){ document.body.removeChild(elem); document.body.removeChild(el); } document.body.appendChild(elem); return elem; } onload=function(){ var links=document.getElementsByTagName("a"); for(var i=0,len=links.length;i<len;i++){ if(links[i].rel=="Imgbox"){ links[i].onclick=function(){ topDiv(this); return false; } } } } </script> <style> .alphaDiv{ z-index:100; width:100%; height:100%; opacity:0.5; background:#666666; top:0; left:0; position:absolute; filter:alpha(opacity=50); } .top-div{ z-index:101; border:1px solid #333; padding:2px; background:#eee; position:absolute; } a{ outline:none; } </style> </head> <body class="body"> <p><a href="https://www.jb51.net/www.jb51.net/images/logo.gif" rel="Imgbox">Click here to show the pic one.</a><br> <a href="http://img.jb51.net/imgby/downloadBtn.gif" rel="Imgbox">Click here to show the pic two.</a><br> <a href="#">Click me</a> </p> </body> </html>
[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
注意上面的图片地址，大家自己

6ox8dn · 发表于 2022-9-1 19:41:17

sdsadsadsadf

6hruhg · 发表于 2022-9-14 00:36:38

收下来看看怎么样

czoz5y · 发表于 2022-9-23 05:09:23

笑纳了老板

0608fv3 · 发表于 2022-10-19 07:38:49

给爸爸爸爸爸爸爸爸爸爸八佰伴八佰伴

醉梦娱乐网 · 发表于 2022-10-22 06:12:13

谢谢您的分享！

gc4hg · 发表于 2023-8-22 01:33:27

好东西可以可以可以可以

e5plu · 发表于 2023-9-5 00:15:00

感谢楼主分享

u6h2m4 · 发表于 2023-9-6 17:39:30

借款金额看了就立刻

醉梦娱乐网 · 发表于 2023-9-11 10:44:22

儿飞飞微风DVD谁vdsvd

账号		自动登录	找回密码
密码			立即注册

[JavaScript] javascript ImgBox透明遮罩层背景图片展示

相关帖子