<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="test/css">
.cover_layer{
width: 100%;
height: 100%;
top:0%;
left:0%;
display: none;
position:fixed;
z-index: 1001;
background-color: rgba(0,0,0,0.2);
}
.cover_img{
z-index: 1002;
padding-left: 25%;
padding-top: 13%;
}
     </style>
<script type="text/javascript" src="js/jquery-1.8.0.js"></script>
</head>
<body>
<img src="img/10069.jpg" onclick="covery_img('图片地址');"/>
<!--图片放大效果-->
<div id="img_enlarge" class="cover_layer" onclick="close_covery_img();">
<img id="cover_img" class="cover_img"/>
</div>
</body>
<script type="text/javascript">
var covery_img = function(url){
$("#cover_img").attr("src",url);
$("#cover_img").attr("width","50%");
$("#cover_img").attr("height","50%");
$("#cover_img").attr("src",url);
$("#img_enlarge").show();
};
var close_covery_img = function(){
$("#img_enlarge").hide();
};
</script>
</html>

效果图如下:

HTML— 弹出遮盖层的更多相关文章

  1. ionic开发中,输入法键盘弹出遮挡住div元素

    采用ionic 开发中,遇到键盘弹出遮挡元素的问题. 以登陆页面为例,输入用户名和密码时,键盘遮挡了登陆按钮. 最终采用自定义指令解决了问题: .directive('popupKeyBoardSho ...

  2. js弹出遮层

    <script> var docEle = function () { return document.getElementById(arguments[0]) || false; } f ...

  3. android 弹出的软键盘遮挡住EditText文本框的解决方案

    1.android 弹出的软键盘遮挡住EditText文本框的解决方案: 把Activit对应的布局文件filename.xml文件里的控件用比重设置布局.(例如:android:layout_wei ...

  4. 【position也可以很复杂】当弹出层遇上了鼠标定位(下)

    前言 接着昨天的内容写,为了保证内容连续性,这里还是把昨天的内容拷了过来. 请用现代浏览器测试 引出问题 有图有真相,我们来看一个智联招聘里面经常出现的图层: 他这个是没有什么问题的,我们来简单看看其 ...

  5. jQuery Dialog弹出层对话框插件

    Dialog.js的相关注释已经添加,可以按照注释,进行相关样式的修改,适用于自定义的各个系统! dialog.js /** * jQuery的Dialog插件. * * @param object ...

  6. z-index解决弹出层遮罩层覆盖子div不能显示输出的问题

    // 添加以下代码来进行测试: // ajax 发生错误,就会执行$('body').ajaxError(function(e, xhr, setting, text){    // e - even ...

  7. javascript--自定义弹出登陆窗口(弹出窗)

    web开发中浏览器对象封装了诸如prompt.alert.confirm等弹出框,但是有的弹出框并不能满足开发需要,需要我们自己定义弹出框,诸如用户登陆框.消息提示框等.本文利用弹出用户登陆框示例,对 ...

  8. datePiker弹出框被其他div遮挡

    最近在做项目的时候,datePiker弹出框被下面的div给遮挡住了,以前也碰到过这样类似的问题,之前直接在style中添加"z-index:1000".但是现在使用angular ...

  9. html点击按钮 弹出 多选择窗口级联下拉复选

    参考代码 代码示例1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

随机推荐

  1. 消息队列系列(四):Rabbitmq常用命令行

    目录:安装目录下的 ./sbin rabbitmqctl [-n node] [-t timeout] [-q] {command} [command options…] http://www.rab ...

  2. canvas如何兼容IE8

    大家都知道canvas是个非常好玩的东西,但是IE9以下的浏览器不支持,有时候业务需求必须用到canvas,且又要求兼容IE8浏览器,那怎么办呢? 1.添加对html5的支持:<!--[if I ...

  3. linux systemctl service examples

    一.脚本服务化目的 1.python 在 文本处理中有着广泛的应用,为了满足文本数据的获取,会每天运行一些爬虫抓取数据.但是网上买的服务器会不定时进行维护,服务器会被重启.这样我们的爬虫服务就无法运行 ...

  4. 纯C实现面向对象

    #include <stdio.h> #include <stdlib.h> //接口 #ifndef Interface #define Interface struct # ...

  5. renderdoc on android

    国内没人发这种贴...一个发了renderdoc with unity是在pc平台跑的 没有挂android 这货有点坑啊 花了好几个小时 wiki上的issue基本全看了...感觉是版本提交的log ...

  6. [Python爬虫] 之二十一:Selenium +phantomjs 利用 pyquery抓取36氪网站数据

    一.介绍 本例子用Selenium +phantomjs爬取36氪网站(http://36kr.com/search/articles/电视?page=1)的资讯信息,输入给定关键字抓取资讯信息. 给 ...

  7. java源码阅读ArrayBlockingQueue

    1类签名与简介 public class ArrayBlockingQueue<E> extends AbstractQueue<E> implements BlockingQ ...

  8. 使用hadoop平台进行小型网站日志分析

    0.上传日志文件到linux中,通过flume将文件收集到hdfs中. 执行命令/home/cloud/flume/bin/flume-ng agent -n a4 -c conf -f /home/ ...

  9. Python 自用代码(拆分txt文件)

    现有一个28G的txt文件,里面每一行是一个分词过的专利全文文档,一共370多万行.我需要把它按每五万行为单位做成一个json文件,格式大致如下: [{"id":"100 ...

  10. angular directive 深入理解

    由于业务的需要,最近angular 的diretive 研究的比较多,有和同事一起共同协作开发scada的项目, 对directive 有了进一步更深的理解. 感觉才开始真正理解了这句话的意思: In ...