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:/ ...
随机推荐
- telnet协议的作用详解,以及telnet端口号介绍
转:http://www.ctowhy.com/382.html Telnet协议,工作在TCP/IP协议栈的“应用层”,telnet是一种使用命令行的远程终端管理的协议,可以远程连接到网络设备上,并 ...
- php漏洞挖掘与代码审计方法
在甲方公司做代码审计一般还是以白盒为主,漏洞无非这么几类,XSS.sql注入.命令执行.上传漏洞.本地包含.远程包含.权限绕过.信息泄露等. 1.xss + sql注入 其中占大头的自然是XSS与SQ ...
- http://blog.csdn.net/szwangdf/article/details/23432783
http://blog.csdn.net/szwangdf/article/details/23432783
- [TypeScript] Create Explicit and Readable Type Declarations with TypeScript mapped Type Modifiers
Using the optional “+” sign together with mapped type modifiers, we can create more explicit and rea ...
- Node.js meitulu图片批量下载爬虫1.06版
//====================================================== // https://www.meitulu.com图片批量下载Node.js爬虫1. ...
- hexo 使用教程
hexo 使用教程 这个早就用起来了,写给需要的小伙伴 mayufo.github.io 先扔出自己的地址 安装 想玩hexo,需要安装以下应用 git node 安装完成在终端输入 $ npm in ...
- 倍福TwinCAT(贝福Beckhoff)常见问题(FAQ)-人机界面HMI自锁按钮和自复位按钮如何理解(Toggle variable Tap variable)
我分别创建两个按钮,自锁和自复位,绑定到主程序的两个布尔值上去 自锁按钮是指点击一下为TRUE,再点击一下为FALSE,自复位按钮是指按下的时候为TRUE,松开的时候为FALSE(也可以勾选Tap ...
- 配置git账号和密码
最开始启动的时候 配置用户名和用户邮箱,安装完git第一件要做的事情! git config --global uesr.name "Sunnshino" git config - ...
- 用unity3d切割图片
原地址:http://www.cnblogs.com/leng-yuye/archive/2012/05/31/2528148.html 需求:把图片的像素中不为alpha的部分切出来保存成单个图片. ...
- FD_SET 详解
http://blog.csdn.net/stephen_yin/article/details/7441165