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

模态代码:

<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. kubernetes架构之二

    一.概述 IaaS:即基础设施即服务,通过虚拟化和分布式存储等技术,实现对包括服务器.存储设备.网络设备等各种物理资源的抽象:从而形成了一个可扩展.可按需分配的虚拟资源池.最具代表性的IaaS产品有A ...

  2. Json循环引用问题

    154down votefavorite 27 I am trying to do a simple JSON return but I am having issues I have the fol ...

  3. root目录空间不够的问题

    今天导入mysql表的时候,提示write file error /tmp/xxx 原因是表太大,创建临时表的时候,tmp目录不够空间了. 找到一个解决方法: 使用 mount --bind moun ...

  4. Shell脚本开发环境的配置和优化实践

    1. 配置vim编辑器 1-1. 为什么不使用vi而是vim vi适合编辑普通文本,不适用编写脚本代码,例如:缺少高亮显示代码.自动缩进等重要功能: vim相当于高级编辑器,可以提高开发效率. 1-2 ...

  5. [转] Java DecimalFormat 用法

    我们经常要将数字进行格式化,比如取2位小数,这是最常见的.Java 提供 DecimalFormat 类,帮你用最快的速度将数字格式化为你需要的样子.下面是一个例子: importjava.text. ...

  6. 网站启用SSL后重启Nginx提示 Enter PEM Pass Phrase:需要输入密码

    ​最近在玩 STARTSSL 感觉个人站点使用这个SSL差不多也够用了.真正商用的SSL当然也可以自行购买. 我个人是为了防止数据中间被抓走,所以用了startssl 也基本就够用了. 转回正题,st ...

  7. CSS边框闪烁呼吸样式

    <html> <body> <head> .arrow_box{animation: glow 800ms ease-out infinite alternate; ...

  8. 启动 angular-phonecat 项目时出现这玩意 。('The header content contains invalid characters');

    最近学习angular, 跟着视频做一个动作,启动 “ angular-phonecat ” 这个项目 敲入 “npm start ” 启动没有问题,但是 "http://localhost ...

  9. 部署到Google App Engine时中途退出后引起的问题

    如果部署GAE时正在upload files时退出,下次部署时会报错 Another transaction by user is already in progress for this app a ...

  10. JQuery中serialize()、serializeArray()和param()用法举例

    在javascript中,serialize()方法也是作用于一个JQuery对象,它能够将DOM元素内容序列化为字符串,serializeArray()方法不是返回字符串,而是将DOM元素序列化后, ...