div模态显示内容
业务需要,上传的图片,本地显示大图;
模态代码:
<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模态显示内容的更多相关文章
- div里面的内容超出自身高度时,显示省略号
1.给DIV设置属性:width: 200px; text-overflow: ellipsis; overflow: hidden; 当div里面的内容总宽度找过 200PX的时候,超出的部分会以“ ...
- 限制div高度当内容多了溢出时显示滚动条
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type"content= ...
- js 控制Div循环显示 非插件版
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- div中的内容水平垂直居中
1. div高度自适应的情况 div在不设置高度的时候,会被里面的内容撑开,内容自动填充在div中,无论是一行内容还是多行内容,此时不需要设置垂直居中,内容自动在中间的, 想要看的更直观些,只需要加上 ...
- javascript学习内容--改变样式、取消设置、显示内容、隐藏内容
<head> <style> body{font-size:12px;} #txt{ height:400px; width:600px; border:#333 solid ...
- 使一个div始终显示在页面中间
使一个div始终显示在页面中间 假设我们有一个div层:<div id=”myDiv”></div> 首先,我们用css来控制它在水平上始终居中,那么我们的css代码应该是这样 ...
- [转]如何让div中的内容垂直居中
转自:http://blog.163.com/yan_1990/blog/static/197805107201211311515454/ 虽然Div布局已经基本上取代了表格布局,但表格布局和Div布 ...
- 【转】div居中代码 DIV水平居中显示CSS代码
原文地址:http://www.divcss5.com/rumen/r622.shtml 如何使用CSS让DIV居中显示,让div水平居中有哪些CSS样式呢? 需要的主要css代码有两个,一个为tex ...
- JS控制DIV隐藏显示
转载自:http://blog.sina.com.cn/s/blog_6c3a67be0100ldbe.html JS控制DIV隐藏显示 一,需求描述: 现在有3个DIV块,3个超链接,需要点击一个链 ...
随机推荐
- 【转】DRY原则的误区
很多编程的人,喜欢鼓吹各种各样的“原则”,比如KISS原则,DRY原则…… 总有人把这些所谓原则奉为教条或者秘方,以为兢兢业业地遵循这些,空喊几个口号,就可以写出好的代码.同时,他们对违反这些原则的人 ...
- javascript 中的==(相等运算符)与===(等同运算符)比较
javascript 中的==(相等运算符)与===(等同运算符)比较:(1)==用于一般比较,===用于严格比较,(2)==在比较的时候可以转换数据类型,===严格比较,只要类型不匹配就返回flas ...
- Android工具类-关于网络、状态的工具类
下方是一个很好的监测网络.状态的工具类 public class NetworkUtils { /** * 网络是否可用 * * @param activity * @return */ public ...
- 另辟蹊径 直取通州的“墨迹天气”APP应用的成功故事
一个天气应用,曾被认为是要挑战国家气象局,网站也莫名其妙地被封,两个合伙人先后离开.创始人金犁是如何把这么一款工具类应用做到人所共知的? 采访 | 郑江波 翟文婷 文 | 翟文婷 出生时间:1982年 ...
- Java代码通过API操作HBase的最佳实践
HBase提供了丰富的API.这使得用Java连接HBase非常方便. 有时候大家会使用HTable table=new HTable(config,tablename);的方式来实例化一个HTabl ...
- html select与option标签
1.select 元素 select 元素可创建单选或多选菜单.<select> 元素中的 <option> 标签用于定义列表中的可用选项 常用属性如下: autofocus: ...
- nginx静态资源缓存与压缩
一.静态资源缓存 参考文章 (1)apache设置max-age或expires 这里需要修改.htaccess文件. <IfModule mod_headers.c> <Files ...
- 使用maven-shade-plugin插件解决spark依赖冲突问题
依赖冲突:NoSuchMethodError,ClassNotFoundException 当用户应用于Spark本身依赖同一个库时可能会发生依赖冲突,导致程序奔溃.依赖冲突表现为在运行中出现No ...
- 分析 ThreadLocal 内存泄漏问题
ThreadLocal 的作用是提供线程内的局部变量,这种变量在线程的生命周期内起作用,减少同一个线程内多个函数或者组件之间一些公共变量的传递的复杂度.但是如果滥用 ThreadLocal,就可能会导 ...
- Memory Leak检測神器--LeakCanary初探
在之前的文章Android内存泄露的几种情形中提到过在开发中常见的内存泄露问题,可是过于草率.因为刚开年,工作还没正式展开,就看了一下Github开源大户Square的LeakCanary,并用公 ...