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

模态代码:

<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. HTTP 请求头 Header

    HTTP 请求头 Header HTTP请求头概述 (HttpServletRequest) HTTP客户程序(例如浏览器),向服务器发送请求的时候必须指明请求类型(一般是GET或者POST或者HEA ...

  2. 【MySQL】MySQL之浅谈MySQL的存储引擎

    什么是MySql数据库 通常意义上,数据库也就是数据的集合,具体到计算机上数据库可以是存储器上一些文件的集合或者一些内存数据的集合.     我们通常说的MySql数据库,sql server数据库等 ...

  3. ASP.NET Core Linux环境安装并运行项目

    原文地址:https://blog.csdn.net/u014368040/article/details/79192622 一 安装环境 1.  从微软官网下载 Linux版本的.NetCoreSd ...

  4. webdriver实用指南python版本(1)-安装开发环境

    webdriver实用指南是本人编写的系列丛书,包括ruby版.python版和java版.在线版是免费的,之前是放在我的github上,但是很多同学总不记得地址,现在转到我的博客上,方便大家阅读. ...

  5. 【转载】mysql 热备份

    原文: http://www.jb51.net/article/70967.htm 热备和冷备是两个相对的概念,冷备是把数据库服务,比如MySQL,Oracle停下来,然后使用拷贝.打包或者压缩命令对 ...

  6. 安卓listview滚动时背景变黑的解决方法

    ListView是常用的显示控件,默认背景是和系统窗口一样的透明色,如果给ListView加上背景图片,或者背景颜色时,滚动时listView会黑掉, 原因是,滚动时,列表里面的view重绘时,用的依 ...

  7. Jacobi并行拆解

    作者:桂. 时间:2018-04-23  21:12:02 链接:http://www.cnblogs.com/xingshansi/p/8921815.html 前言 本文主要是复数矩阵分解的拆解思 ...

  8. dubbo调用服务出现如下异常

    log4j:WARN No appenders could be found for logger (org.springframework.context.support.ClassPathXmlA ...

  9. python 保留两位小数

    >>> a = 1 >>> b = 3 >>> print(a/b) 0 >>> #方法一: ... print(round(a ...

  10. es 模板

    { "template": "log*", "order":10, "settings": { "index& ...