HTML— 弹出遮盖层
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="test/css">
.cover_layer{
width: 100%;
height: 100%;
top:0%;
left:0%;
display: none;
position:fixed;
z-index: 1001;
background-color: rgba(0,0,0,0.2);
}
.cover_img{
z-index: 1002;
padding-left: 25%;
padding-top: 13%;
}
</style>
<script type="text/javascript" src="js/jquery-1.8.0.js"></script>
</head>
<body>
<img src="img/10069.jpg" onclick="covery_img('图片地址');"/>
<!--图片放大效果-->
<div id="img_enlarge" class="cover_layer" onclick="close_covery_img();">
<img id="cover_img" class="cover_img"/>
</div>
</body>
<script type="text/javascript">
var covery_img = function(url){
$("#cover_img").attr("src",url);
$("#cover_img").attr("width","50%");
$("#cover_img").attr("height","50%");
$("#cover_img").attr("src",url);
$("#img_enlarge").show();
};
var close_covery_img = function(){
$("#img_enlarge").hide();
};
</script>
</html>
效果图如下：
HTML— 弹出遮盖层的更多相关文章
- ionic开发中，输入法键盘弹出遮挡住div元素
采用ionic 开发中,遇到键盘弹出遮挡元素的问题. 以登陆页面为例,输入用户名和密码时,键盘遮挡了登陆按钮. 最终采用自定义指令解决了问题: .directive('popupKeyBoardSho ...
- js弹出遮层
<script> var docEle = function () { return document.getElementById(arguments[0]) || false; } f ...
- android 弹出的软键盘遮挡住EditText文本框的解决方案
1.android 弹出的软键盘遮挡住EditText文本框的解决方案: 把Activit对应的布局文件filename.xml文件里的控件用比重设置布局.(例如:android:layout_wei ...
- 【position也可以很复杂】当弹出层遇上了鼠标定位（下）
前言 接着昨天的内容写,为了保证内容连续性,这里还是把昨天的内容拷了过来. 请用现代浏览器测试 引出问题 有图有真相,我们来看一个智联招聘里面经常出现的图层: 他这个是没有什么问题的,我们来简单看看其 ...
- jQuery Dialog弹出层对话框插件
Dialog.js的相关注释已经添加,可以按照注释,进行相关样式的修改,适用于自定义的各个系统! dialog.js /** * jQuery的Dialog插件. * * @param object ...
- z-index解决弹出层遮罩层覆盖子div不能显示输出的问题
// 添加以下代码来进行测试: // ajax 发生错误,就会执行$('body').ajaxError(function(e, xhr, setting, text){ // e - even ...
- javascript--自定义弹出登陆窗口（弹出窗）
web开发中浏览器对象封装了诸如prompt.alert.confirm等弹出框,但是有的弹出框并不能满足开发需要,需要我们自己定义弹出框,诸如用户登陆框.消息提示框等.本文利用弹出用户登陆框示例,对 ...
- datePiker弹出框被其他div遮挡
最近在做项目的时候,datePiker弹出框被下面的div给遮挡住了,以前也碰到过这样类似的问题,之前直接在style中添加"z-index:1000".但是现在使用angular ...
- html点击按钮 弹出 多选择窗口级联下拉复选
参考代码 代码示例1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
随机推荐
- sql-server-on-linux-how-i-think-they-did-it : Anthony Nocentino's Blog
http://www.sqlservercentral.com/blogs/anthony-nocentinos-blog/2016/11/21/sql-server-on-linux-how-i-t ...
- 在Docker中从头部署自己的Spark集群
由于自己的电脑配置普普通通,在VM虚拟机中搭建的集群规模也就是6个节点左右,再多就会卡的不行 碰巧接触了Docker这种轻量级的容器虚拟化技术,理论上在普通PC机上搭建的集群规模可以达到很高(具体能有 ...
- LeakCanary 的使用遇到的弯路
基本上来源是: http://www.liaohuqiu.net/cn/posts/leak-canary-read-me/ 1. demon 中自带的android_v7兼容包有问题的,建议自己使 ...
- 带伪3d的类型的流程画图工具
Edraw Max 类似:
- Jquery获取当前行的数据
取表格当前行数据js代码: Java代码 $(function() { $(".myclass").each(function(){ var tmp=$(this).chi ...
- 谋哥：玩App怎么赚钱（三）
谋哥每天坚持写文章,如今写作速度是越来越快了,当然这样也能节省点时间.只是坚持每天写,确实须要极大的耐力和毅力,由于偶然事件会影响你心情和灵感.只是我一直相信秦刚老师(微信/QQ1111884 )说的 ...
- J2EE之EJB
EJB是sun的JavaEEserver端组件模型,最大的用处是部署分布式应用程序.EJB把使用java开发的server组件的部署和开发进行标准化. 凭借java跨平台的优势.用EJB技术部署的分 ...
- Axure——恢复以及备份功能从容面对意外
1. 背景 近期刚刚接手java项目,在进行了为期一周的需求理解之后,对于最初的原型也開始做微小的调整,十一期的小伙伴们也积极地參与进来,这使得我们这个团队不断地在壮大和温馨. 眼看着原型即 ...
- 云计算的三种服务模式：IaaS，PaaS和SaaS（转载）
云服务”现在已经快成了一个家喻户晓的词了.如果你不知道PaaS, IaaS 和SaaS的区别,那么也没啥,因为很多人确实不知道. “云”其实是互联网的一个隐喻,“云计算”其实就是使用互联网来接入存储或 ...
- python基础 实战作业 ---Excel基本读写与数据处理
代码地址如下:http://www.demodashi.com/demo/11650.html 看完本篇需要: 10min 作业练习需要: 0.5h~3h(依练习者对python熟悉程度而定) 看完本 ...