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个超链接,需要点击一个链 ...
随机推荐
- 【Oracle】Oracle的内外连接
目录结构: contents structure [+] Oracle的内外连接 内连接 等值连接 非等值连接 自连接 外连接 外连接的特点 如何实现外连接 SQL99的内外连接 SQL99的内连接 ...
- Oracle 12C -- 统一启动/关闭PDBs
SQL> select name,open_mode from v$pdbs; NAME OPEN_MODE ------------------------------ ---------- ...
- Java – How to convert String to Char Array
Java – How to convert String to Char ArrayIn Java, you can use String.toCharArray() to convert a Str ...
- Hbase/Hadoop Java API编程常用语句
从scanner获取rowkey: for(Result rr : scanner){ String key =Bytes.toString(rr.getRow())} HBase API - Res ...
- 使用 sqlyog 导入导出数据显示 lost connection to mysql server during query
mysql中经常需要备份数据,在使用 sqlyog 进行备份数据库为转储文件,然后在其他数据库中导入发生 lost connection 经过查询大量资料是数据库配置的 max_allowed_pac ...
- redis PUB/SUB(发布/订阅)
PSUBSCRIBE订阅一个或多个符合给定模式的频道 PUBLISH将信息message 发送到指定的频道channel PUBSUB是一个查看订阅与发布系统状态的内省命令 PUBSUB CHANNE ...
- MySql(十一):MySQL性能调优——常用存储引擎优化
一.前言 MySQL 提供的非常丰富的存储引擎种类供大家选择,有多种选择固然是好事,但是需要我们理解掌握的知识也会增加很多.本章将介绍最为常用的两种存储引擎进行针对性的优化建议. 二.MyISAM存储 ...
- Tomcat7启动报Error listenerStart错误
问题 Tomcat7在启动时报错,详细信息如下: 十一月 23, 2013 7:21:58 下午 org.apache.catalina.core.StandardContext startInter ...
- mui封装做好的手机版网站为apk
BOSS提到的一个功能,就是把已经做好的手机网站http://xxx.com/m/home/index ,想着看起来应该蛮简单,一个html页面里就一个iframe就好了,然后宽度和高度都设置为100 ...
- vivado自定IP例化的问题,怎么生成VHDL的例化
在tools 下面选中project settings.然后选targat language为VHDL .这样就会生成一个以VHDL语言为模板的ip. 转载:https://zhidao.baidu. ...