<!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. 移植u-boot-2012.4到Tiny6410_1G_Nandflash

    Uboot-2012.4的启动流程: 自从Uboot-2010后的Uboot在文件结构和启动流程方面都有非常大的改变,所以移植Uboot-2012.4的时候还是费了我不少时间, 首先在编译Uboot的 ...

  2. ios如何实现被键盘遮挡时，带有textfield的tableview自动上移

    最正规的办法,用通知step 1:在进入视图的时候添加监视:(viewDidLoad什么的)   复制代码 // Observe keyboard hide and show notification ...

  3. Remote procedure call (RPC)

    Remote procedure call (RPC) (using the .NET client) Prerequisites This tutorial assumes RabbitMQ isi ...

  4. Coherence生产环境异常定位过程

    8月1日前广西发生了一次地震, 8月份前又发生了好几次台风,估计对地下的光缆有点损害(比如5根断了2根之类),感觉家里的网速都慢了好多,在客户那里部署的coherence缓存环境也出现了问题,两台hp ...

  5. Microsoft.VisualC 命名空间包含支持用 c + + 语言的代码生成和编译的类。 混合编程中使用COM接口指针

    Microsoft.VisualC 命名空间包含支持用 c + + 语言的代码生成和编译的类. Microsoft.VisualC.StlClr Unmanaged Code 和 Managed Co ...

  6. CocoSourcesCS 4

    /*------------------------------------------------------------------------- ParserGen.cs -- Generati ...

  7. XP如何安装字体

    1 点击控制面板,选择外观和主题,然后在左侧菜单中选择字体 2 点击文件,安装新字体选择驱动器和文件夹以找到自己下载的字体文件位置(如微软雅黑.ttf)点击确定之后可以安装.

  8. Java 多线程之 synchronized 和 volatile 的比較

    概述 在做多线程并发处理时,常常须要对资源进行可见性訪问和相互排斥同步操作.有时候,我们可能从前辈那里得知我们须要对资源进行 volatile 或是 synchronized 关键字修饰处理.但是,我 ...

  9. PuTTY连接Linuxserver常常断线解决方式

    PuTTY在远程连接server之后.常常会断线提示"Software caused connection abort",并且常常在非常短的时间内就失去连接. 解决方式例如以下: ...

  10. PHP函数之HTMLSPECIALCHARS_DECODE

    PHP函数之htmlspecialchars_decode   htmlspecialchars_decode :将特殊的 HTML 实体转换回普通字符   htmlspecialchars: 将普通 ...