javascript ImgBox透明遮罩层背景图片展示
发布时间：2024-02-27 04:51:07
标签：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>Click here to show the pic one.<br> Click here to show the pic two.<br>Click me </p> </body> </html>
注意上面的图片地址，大家自己
0
投稿猜你喜欢
- 前言PyInstaller可以用来打包python应用程序，打包完的程序就可以在没有安装Python解释器的机器上运行了。PyInstall
- 如何在ADSI中查询用户属性？看看下面这个返回用户可用属性的代码实例，基本上返回了大部分可用的用户属性：<％Dim x&nb
- （1）标准类型操作符(所有的集合类型)成员关系 (in, not in) &nbs
- python 字符串替换 是python 操作字符串的时候经常会碰到的问题，这里简单介绍下字符串替换方法。python 字符串替换可以用2种
- 通过一条命令用Npm安装gulp-htmlmin:npm install gulp-htmlmin --save-dev安装完毕后，打开gu
最新的CentOS8已经内置了Python2和Python3，出入Python2和Python3两个命令可以分别进入Python2和Pyth- 1.2 本篇文章内容概要1.3 本篇文章内容概括在SQL语句中，关于表连接，若按照表的数量来划分，可以划分为单表连接、两表连接和两表以上连接
- 如何使用MsChart？MsChart是微软出品的一款功能强大的制作图表工具，用它可以很方便的建立各种图表。下面我们举例来说明：submit
- ansible 简介ansible 是什么？ansible是新出现的自动化运维工具，基于Python开发，集合了众多运维工具（puppet、
- 你知道吗？实际上Python早在20世纪90年代初就已经诞生，可是火爆时间却并不长，就小编本人来说，也是前几年才了解到它。据统计,目前Pyt
- 本文实例讲述了php使用curl获取https请求的方法。分享给大家供大家参考。具体分析如下：今日在做一个项目，需要curl获取第三方的AP
- auth模块简介auth模块是对登录认证方法的一种封装，之前我们获取用户输入的用户名及密码后需要自己从user表里查询有没有用户名和密码符合
- 阅读是在网站中的一个很重要的部分，可以说是网站的核心。网站最终要呈现给用户的就是内容。尤其是文本内容。豆瓣豆瓣前段时间小改了一下，页面拉宽，
- python是支持多线程的，主要是通过thread和threading这两个模块来实现的。thread模块是比较底层的模块，threadin
- 本文实例讲述了javascript设置页面背景色及背景图片的方法。分享给大家供大家参考，具体如下：<!DOCTYPE HTML PUB
- MySQL的分页似乎一直是个问题，有什么优化方法吗？网上看到网上推荐了一些分页方法，但似乎不太可行，你能点评一下吗？方法1: 直接使用数据库
- 1.什么是Pillow首先我们需要了解一下PIL（Python Imaging Library）,它是Python2中非常强大的图像处理标准
- 采用python实现简单QQ单用户机器人的方法如下：一、首先我们查看一下关于3GQQ的相关协议： 对此，
- 多个字段模糊查询， 括号中的下划线是双下划线，双下划线前是字段名，双下划线后可以是icontains或contains,区别是是否大小写敏感
- 1.读取CSV文件到Listdef readCSV2List(filePath): try: file=open(filePat
