<!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. Windows 无法验证此设备所需的驱动程序的数字签名。某软件或硬件最近有所更改，可能安装了签名错误或损毁的文件，或者安装的文件可能是来路不明的恶意软件。(代码52)

    由未签名驱动导致的键鼠装无法使用的问题 usb 问题失效. 要是win 10的话  导致的结果就是 无线键鼠套装无法使用. 解决办法是 1.按下shift 按键 点击重启按钮 重启后 2.疑难解答-- ...

  2. JVM OQL查询语言

    OQL查询语言 SELECT Clause The SELECT clause determines what to extract from the heap dump. To display ob ...

  3. 小二助手（react应用框架）-http访问

    浏览地址http://118.25.217.253:4000 账号test密码123   qq讨论群:836719189 要写这个系统,就需要数据来源,让我们先来看看如果通过客户端调用服务端api拿到 ...

  4. EL表达式中null和empty的区别

    下面通过一个例子看看看null和empty的区别,建立一个test.jsp文件,内容如下: <%@page pageEncoding="utf-8" %> name:$ ...

  5. vim删除文本文件中末行^M

    ^M字符的来历和作用:在DOS/Windows里,文本文件的换行符为\r\n,而在*nix系统里则为\n,所以DOS/Windows里编辑过的文本文件到了*nix里,每一行都多了个^M.所以^M只是一 ...

  6. cmdb是什么

    CMDB -- Configuration Management Database 配置管理数据库,CMDB存储与管理企业IT架构中设备的各种配置信息,它与所有服务支持和服务交付流程都紧密相联,支持这 ...

  7. Android API Guides---Host-based Card Emulation

    Host-based Card Emulation 很多提供NFC功能的Andr​​oid手机已经支持NFC卡模拟.在大多数情况下.该卡是由在该装置的单独芯片仿真,称为安全元件. 无线运营商提供了非常 ...

  8. 持续集成之代码质量管理-Sonar

    原文:http://blog.csdn.net/abcdocker/article/details/53840582 Sonar介绍 Sonar 是一个用于代码质量管理的开放平台.通过插件机制,Son ...

  9. Node.js 解析gzip网页（https）

    gzip网页指网页头字段Content-Encoding是gzip(GNU zip)内容编码方式.内容编码是指不丢失实体信息的前提下所进行的压缩. Node.js 代码如下: //========== ...

  10. MPTCP 源码分析(五) 接收端窗口值

    简述:      在TCP协议中影响数据发送的三个因素分别为:发送端窗口值.接收端窗口值和拥塞窗口值. 本文主要分析MPTCP中各个子路径对接收端窗口值rcv_wnd的处理.   接收端窗口值的初始化 ...