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个超链接,需要点击一个链 ...
随机推荐
- 【java】break outer,continue outer的使用
break默认是结束当前循环,有时我们在使用循环时,想通过内层循环里的语句直接跳出外层循环,java提供了使用break直接跳出外层循环,此时需要在break后通过标签指定外层循环.java中的标签是 ...
- ASP.NET项目在IIS上使用虚拟目录
在IIS中,应用程序与虚拟目录特别容易混淆,但两者又是完全不同的概念. 应用程序是一个逻辑边界,这个边界可以分隔网站及其组成部分.虚拟目录则是一个真实的指针,这个指针指向了一个本地或远程的物理路径.虚 ...
- Intellij idea 配置热部署
1. 采用外部tomcat的配置 1)打开右上角Run的Edit Configuration进入Tomcat配置选项页面 2)将On frame deactivation选项更改为 Update ...
- 【转载】Ajax JS 跨域请求
原文: 简单的ajax请求:http://blog.csdn.net/net_lover/article/details/5172509 复杂的ajax请求:http://blog.csdn.net/ ...
- http 状态码 码表
HTTP状态码详解 - 查询资料 1xx消息 这一类型的状态码,代表请求已被接受,需要继续处理.这类响应是临时响应,只包含状态行和某些可选的响应头信息,并以空行结束.由于HTTP/1.0协议中没有定义 ...
- 根据Rowkey从HBase中查询数据
/** * @Title: queryData * @Description: 从HBase查询出数据 * @author xxxx * @param tableName * 表名 * @param ...
- Elastalert 监控
1.logstash 做监控的优劣 适合match-then-alert 的方式 logstash-filter-metric logstash-input-http_poller 无状态.进程间数据 ...
- 近观ArcGIS 10.3.1
ArcGIS 10.3.1公布了是有很多增强和改变.接下来我们重点内容一睹为快. 一.三维内容制作.公布及分享 ArcGIS 10.3.1能够实现三维内容制作.公布及分享.公布流程: 须要的软件环境 ...
- [svc][op]磁盘(结构)容量计算
磁盘结构和容量计算 fdisk -l显示信息详解 [root@www.linuxidc.com ~]# fdisk -l Disk /dev/sda: bytes heads, sectors/tra ...
- 【Unity】10.1 类人动画的导入和设置
分类:Unity.C#.VS2015 创建日期:2016-05-02 一.制作或购买类人模型 为了充分使用 Mecanim 类人动画系统和类人动画的动画重定位功能,需要先使用其他3D建模软件(例如3d ...