业务需要,上传的图片,本地显示大图;

模态代码:

<div onclick="hidebigimg()" class = "bg-model" style="position:absolute;top:0%;left:0%;display:none;background:rgba(0,0,0,0.3);width:100%;height:100%;position:fixed;z-index:9999">
  <img class = 'content' style="cursor:pointer;position: absolute;left: 50%;top: 50%;border-radius: 8px;margin-top:-300px;margin-left:-400px; width: 800px;height:600px;background-color: #fff;"/>
</div>

js:

//显示大图
function showbigimg(obj){
if(!$(obj).attr("src")){
return;
}
$(".content").attr("src",$(obj).attr("src"));
$(".bg-model").fadeTo(300,1)
  //隐藏窗体的滚动条
  $("body").css({ "overflow": "hidden" });
}
//隐藏大图
function hidebigimg(){
$(".content").removeAttr("src");
$(".bg-model").fadeTo(300,1);
$(".bg-model").hide();
//显示窗体的滚动条
  $("body").css({ "overflow": "visible" });
}

//效果图:

div模态显示内容的更多相关文章

  1. div里面的内容超出自身高度时,显示省略号

    1.给DIV设置属性:width: 200px; text-overflow: ellipsis; overflow: hidden; 当div里面的内容总宽度找过 200PX的时候,超出的部分会以“ ...

  2. 限制div高度当内容多了溢出时显示滚动条

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type"content= ...

  3. js 控制Div循环显示 非插件版

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. div中的内容水平垂直居中

    1. div高度自适应的情况 div在不设置高度的时候,会被里面的内容撑开,内容自动填充在div中,无论是一行内容还是多行内容,此时不需要设置垂直居中,内容自动在中间的, 想要看的更直观些,只需要加上 ...

  5. javascript学习内容--改变样式、取消设置、显示内容、隐藏内容

    <head> <style> body{font-size:12px;} #txt{ height:400px; width:600px; border:#333 solid ...

  6. 使一个div始终显示在页面中间

    使一个div始终显示在页面中间 假设我们有一个div层:<div id=”myDiv”></div> 首先,我们用css来控制它在水平上始终居中,那么我们的css代码应该是这样 ...

  7. [转]如何让div中的内容垂直居中

    转自:http://blog.163.com/yan_1990/blog/static/197805107201211311515454/ 虽然Div布局已经基本上取代了表格布局,但表格布局和Div布 ...

  8. 【转】div居中代码 DIV水平居中显示CSS代码

    原文地址:http://www.divcss5.com/rumen/r622.shtml 如何使用CSS让DIV居中显示,让div水平居中有哪些CSS样式呢? 需要的主要css代码有两个,一个为tex ...

  9. JS控制DIV隐藏显示

    转载自:http://blog.sina.com.cn/s/blog_6c3a67be0100ldbe.html JS控制DIV隐藏显示 一,需求描述: 现在有3个DIV块,3个超链接,需要点击一个链 ...

随机推荐

  1. Linux安装ElasticSearch-2.2.0-分词器插件(IK)

    1.在gitpub上搜索elasticsearch-analysis,能够看到所有elasticsearch的分词器: 2.安装IK分词器:https://github.com/medcl/elast ...

  2. [企业化NET]Window Server 2008 R2[2]-SVN 服务端 和 客户端 安装

    1.  服务器基本安装即问题解决记录      √ 2.  SVN环境搭建和客户端使用 2.1  服务端 和 客户端 安装    √ 2.2  项目建立与基本使用     √ 2.3  基本冲突解决, ...

  3. xtrabackup-工作原理

    数据备份 xtrabackup是基于innodb的crash恢复功能之上的.它会拷贝innodb数据文件(这会导致数据不一致的),然后对文件执行crash恢复使其一致. 因为innodb维护了redo ...

  4. Java NIO.2 —— 文件或目录移动操作

    移动文件树是复制和删除的文件树的结合.实际上,有两种方式来完成文件的移动.一种是使用Files.move(), Files.copy(), 和Files.delete() 这三个方法:另一种是只使用F ...

  5. 上传下载 demo

    import org.apache.commons.io.IOUtils; import org.apache.commons.lang.StringUtils; import org.springf ...

  6. Mac office ppt无法正常输入文字的问题解决方案

     Mac office ppt无法正常输入文字的问题解决方案  Mac下每次启动office ppt后,在输入文字时会出现输入法文本框快速闪退无法正常录入文字的情况,在PowerPoint中会出现这种 ...

  7. jQuery学习笔记(jquery.ui插件)

    官网地址:http://ui.jquery.com/ jQuery UI源自于一jQuery插件-Interface.目前版本是1.10.3,需要jQuery 1.6以上版本支持. jQuery UI ...

  8. 如何在 ASP.NET 中(服务器端)主动清除(HTTP内容响应时)浏览器中的 Cookies 数据

    这个 Cookies 设计的好坑...就不写进坑的过程了,直接贴最终解决代码: //清除 cookies 记录 foreach (var key in Request.Cookies.AllKeys) ...

  9. mac安装GnuGP

    1.首先查看gnugp最新的稳定版: localhost:~ jack$ brew search gnupg ==> Formulae gnupg gnupg-pkcs11-scd gnupg@ ...

  10. lua -- string

    table.keys 返回指定表格中的所有键. 格式: keys = table.keys(表格对象) 用法示例: , b = , c = } local keys = table.keys(t) - ...