1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title></title>
  6.         <style type="test/css">
  7.             .cover_layer{
  8.                 width: 100%;
  9.                 height: 100%;
  10.                 top:0%;
  11.                 left:0%;
  12.                 display: none;
  13.                 position:fixed;
  14.                 z-index: 1001;
  15.                 background-color: rgba(0,0,0,0.2);
  16.             }
  17.             .cover_img{
  18.                 z-index: 1002;
  19.                 padding-left: 25%;
  20.                 padding-top: 13%;
  21.             }
  22. 　　　　  </style>
  23.         <script type="text/javascript" src="js/jquery-1.8.0.js"></script>
  24.     </head>
  25.     <body>
  26.         <img src="img/10069.jpg" onclick="covery_img('图片地址');"/>
  27.         <!--图片放大效果-->
  28.         <div id="img_enlarge" class="cover_layer" onclick="close_covery_img();">
  29.             <img  id="cover_img" class="cover_img"/>
  30.         </div>
  31.     </body>
  32.      <script type="text/javascript">
  33.         var covery_img = function(url){
  34.             $("#cover_img").attr("src",url);
  35.             $("#cover_img").attr("width","50%");
  36.             $("#cover_img").attr("height","50%");
  37.             $("#cover_img").attr("src",url);
  38.             $("#img_enlarge").show();
  39.         };
  40.         var close_covery_img = function(){
  41.             $("#img_enlarge").hide();
  42.         };
  43.     </script>
  44. </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. 定时任务-crontab

     一.crond简介 crond 是linux下用来周期性的执行某种任务或等待处理某些事件的一个守护进程,与windows下的计划任务类似,当安装完成操作系统后,默认会安装此服务工具,并且会自动启动c ...

  2. linux-去重-uniq

    uniq : 默认(去重)  |  -d(显重)   |   -u(删重) 语法:uniq  [选项]  文件 选项 -c或--count 在每列旁边显示该行重复出现的次数 -d或--repeat 仅 ...

  3. notepad++ 常用的插件及教程

    NotePad++ 教程 HEX-Editor      http://files.cnblogs.com/pengdonglin137/HexEditor_0_9_5_UNI_dll.zip 我的N ...

  4. python之web路径扫描工具

    # coding: UTF-8 import sys, os, time, httplibimport relist_http=[]  #http数组 def open_httptxt():  #打开 ...

  5. 奇特的JavaScript连续赋值运算

    一.引子: }; a.x = a = {n:}; alert(a.x); // --> undefined 以上第二句 a.x = a = {n:2} 是一个连续赋值表达式.这个连续赋值表达式在 ...

  6. 推荐一个静态页面生成工具-mkdocs

    最近需要找一个生成api文档的工具,找来找去发现mkdocs特别符合需求. 部署只需python和pip 直接生成静态html 用markdown编写 不需要再markdown里指明日期.标题等信息 ...

  7. 转：ios学习指南

    著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.作者:Franz Fang链接:https://www.zhihu.com/question/20264108/answer/302 ...

  8. CocoSourcesCS 4

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

  9. &lt;十&gt;读&lt;&lt;大话设计模式&gt;&gt;之观察者模式

    观察者模式也是比較简单的一种模式,可能从名字上理解无法明确,但真正理解其含义之后就非常easy了,说实话在自己来发的项目中自己也用到过.仅仅只是不知道它叫观察者罢了,仅仅要懂面向对象的对继承多态理解非 ...

  10. lodash escapeRegExp 转义正则特殊字符

    _.escapeRegExp([string='']) 转义RegExp 中特殊的字符 "^", "$", "\", ".&quo ...