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

模态代码:

<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. solr开发从查询结果集中获取对象数据

    solrJ从查询结果集中获取对象数据. 方案一:自定义转换方式 /** * * SolrDocument与实体类转换 [测试通过] * * @author pudongping * * @param ...

  2. 页面生命周期里面还有很东西,如PageHandlerFactory等等这些东东也够吃一壶的,发现每走到一个领域,发现要学的东西实在是太多太多啦,总感觉自己所学的东西只是沧海一粟,走过了这道坎,又是一片海洋,我只能呐喊:生命永不止息,学海无涯----够用就好。

    页面生命周期里面还有很东西,如PageHandlerFactory等等这些东东也够吃一壶的,发现每走到一个领域,发现要学的东西实在是太多太多啦,总感觉自己所学的东西只是沧海一粟,走过了这道坎,又是一片 ...

  3. git log退出方法

    英文状态下按Q

  4. Groovy 学习手册(2)

    二. 工具 1. 控制台 groovyConsole: Groovy 控制台是一个非常易于使用和简单的轻量级的编辑器.你可以在里面做很多事情. 在编辑器里面可以书写代码,Windows 下,按下Ctr ...

  5. Android 获取闹钟引发的血案

    想做一个锁屏的软件.锁屏后可以显示闹钟信息. 一开始的思路是通过android content provider获取 mActivityObject.getContentResolver().quer ...

  6. 转:zTree树控件扩展篇:巧用zTree控件实现文本框输入关键词自动模糊查找zTree树节点实现模糊匹配下拉选择效果

    是否可以借助于zTree实现文本框输入关键词自动模糊匹配zTree下拉树,然后选择下拉树内节点显示在文本框内且隐藏下拉树. 看到这个需求脑子里头大致已经想到了要如何实现这样一个需求,当时是限于时间问题 ...

  7. 修改eclipse.ini文件指定jdk

    在eclipse.ini文件顶部插入 -vmE:/kfgj/Java/jdk1.7.0_21/bin/javaw.exe

  8. nginx 反向代理说明

    1 在大型项目开发中,可能会有多个应用部署在不同机器上,如果想让用户访问单个域名或IP访问到这些应用,可以使用 nginx 的反向代理,将应用的地址通过 nginx 代理,用户通过访问 nginx 地 ...

  9. 使用git上传项目到码云

    一.git安装 1.首先在官方网站下载git工具,或者根据以下链接进行下载:http://download.csdn.net/detail/qq_27501889/9788879(此链接版本为git- ...

  10. RSA算法 JS加密 JAVA解密

    有这样一个需求,前端登录的usernamepassword,password必需加密.但不可使用MD5,由于后台要检測password的复杂度,那么在保证安全的前提下将password传到后台呢,答案 ...