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

更新时间：2009年07月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/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需再刷新一下页面才能执行]

注意上面的图片地址，大家自己

您可能感兴趣的文章:

基于JS实现一个小型编译器
这篇文章主要为大家介绍了如何利用JS实现一个小型编译器，文中的示例代码讲解详细，对我们学习或工作有一定的参考价值，需要的可以参考一下
2022-04-04
菜鸟也能搞懂js中typeof与instanceof区别
instanceof和typeof是两个运算符，在程序设计中用到，常用来判断一个变量是否为空，或者是什么类型的，本文就来介绍一下typeof与instanceof区别，感兴趣的可以了解一下
2021-09-09
postcss-pxtorem实现页面自适应的原理解析
postcss-pxtorem是一个PostCSS插件,用于将CSS中的像素值转换为rem单位,以实现响应式布局和适配不同屏幕尺寸的需求,本文给大家介绍postcss-pxtorem实现页面自适应的原理解析,感兴趣的朋友一起看看吧
2023-12-12
js控件Kindeditor实现图片自动上传功能
这篇文章主要为大家详细介绍了js控件Kindeditor实现图片自动上传功能的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-06-06
js中使用使用原型(prototype)定义方法的好处详解
下面小编就为大家带来一篇js中使用使用原型(prototype)定义方法的好处详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-07-07
利用策略模式与装饰模式扩展JavaScript表单验证功能
这篇文章主要介绍了利用策略模式与装饰模式扩展JavaScript表单验证功能,需要的朋友可以参考下
2017-02-02
JS实现数组去重复值的方法示例
这篇文章主要介绍了JS实现数组去重复值的方法,结合实例形式分析了JS通过数组遍历、运算等方法实现去重复值的操作技巧,需要的朋友可以参考下
2017-02-02
ExtJs中gridpanel分组后组名排序实例代码
这篇文章主要介绍了ExtJs中gridpanel分组后组名排序实例代码，有需要的朋友可以参考一下
2013-12-12
javascript 解决浏览器不支持的问题
这篇文章主要介绍了javascript 解决浏览器不支持的问题的相关资料,需要的朋友可以参考下
2016-09-09
JavaScript事件 "事件对象"的注意要点
这篇文章主要介绍了JavaScript事件,告诉大家"事件对象"的注意要点，感兴趣的小伙伴们可以参考一下
2016-01-01