JavaScript实现遮罩层
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.bg{
border:1px solid black;
display:none;
position:fixed;
width:100%;
height:100%;
background:#000;
z-index:2;
top:0;
left:0;
opacity:0.5;
}
.content{
display:none;
width:500px;
height:300px;
position:fixed;
top:50%;
margin-top:-150px;
background:#fff;
z-index:3;
left:50%;
margin-left:-250px;}
</style>
</head>
<body>
<div class="click">点击这里</div>
<div class="bg"></div>
<div class="content">这里是正文内容</div> <script src="js/jquery-1.11.0.min.js"></script>
<script>
$(function(){
$('.click').click(function(){
$('.bg').css({'display':'block'});
$('.content').css({'display':'block'});
});
$('.bg').click(function(){
$('.bg').css({'display':'none'});
$('.content').css({'display':'none'});
});
});
</script>
</body>
</html>
运行结果
JavaScript实现遮罩层的更多相关文章
- java javaScript实现遮罩层 动态加载
通过java.JavaScript和css实现点击按钮后出现灰色遮罩层,并显示动态加载的字样,提高用户体验,废话不多说,上代码(写这个博客的原因是网上代码太多新手根本不知道哪里对哪里,这里剔除所有无关 ...
- jQuery弹出遮罩层效果完整示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 【Javascript Demo】遮罩层和百度地图弹出层简单实现
其实想做的就是显示百度地图的弹出层,现在已经简单实现了.示例和代码如下,点击按钮可以看到效果: 1.示例: 2.代码: <!DOCTYPE html PUBLIC "-//W3C/ ...
- 【Javascript Demo】遮罩层和弹出层简单实现
最近纠结于遮罩层和弹出层的实现,终于搞定了个简单的版本.示例和代码如下,点击按钮可以看到效果: 1.示例: 2.代码: <!DOCTYPE html PUBLIC "-//W3C//D ...
- 【Javascript Demo】谷歌地图简单实现（附遮罩层和弹出层实现）
虽然百度地图实现了,但只是国内的,而且前几天貌似还出问题了,对于国际的只能用谷歌地图了,所以就简单研究了下,做了个差不多的. 基本步骤,谷歌地图API文档其实写的很清楚了,先获取API密钥,然后引用j ...
- 用JavaScript实现CheckBox的全选取消反选，及遮罩层中添加内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery遮罩层登录对话框
用户登录是许多网站必备的功能.有一种方式就是不管在网站的哪个页面,点击登录按钮就会弹出一个遮罩层,显示用户登录的对话框.这用方式比较灵活方便.而现在扫描二维码登录的方式也是很常见,例如QQ.微信.百度 ...
- jQuery css3鼠标悬停图片显示遮罩层动画特效
jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...
- jQuery弹出关闭遮罩层
效果体验:http://keleyi.com/keleyi/phtml/jquery/9.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...
随机推荐
- POJ 3273 Monthly Expense 二分枚举
题目:http://poj.org/problem?id=3273 二分枚举,据说是经典题,看了题解才做的,暂时还没有完全理解.. #include <stdio.h> #include ...
- 学习TextKit框架（上）
TextKit简介 在iOS7之前我们要实现图文混排要使用CoreText,iOS6时有了Attribute string 可以解决一些简单的富文本需求.直到iOS7 苹果推出了TextKit,Tex ...
- 修改tabbar 字体颜色
NSDictionary *seletedTextAttrs = @{NSForegroundColorAttributeName:[UIColor orangeColor]}; 修改tabbar 字 ...
- html 5 中的 6位 十六进制颜色码 代表的意思
人的眼睛看到的颜色有两种: ⒈ 一种是发光体发出的颜色,比如计算机显示器屏幕显示的颜色: ⒉ 另一种是物体本身不发光,而是反射的光产生 十六进制颜色码 的颜色,比如看报纸和杂志上的颜色. 我们又知道任 ...
- [CC150] Find a line passing the most number of points
Problem: Given a two-dimensional graph with points on it, find a line which passes the most number o ...
- [刷机教程] 三星Note8 N5100不卡屏的唯一解决办法--落雨刷机教程
首先我自己写了一个word,在附件里.大概23页,图文并茂.附带三星NOTE8 N5100 MD2下载包 刷机要谨慎啊,小伙伴们. 刷机教程已经上传到我本人的网站:点击进入去看吧.和word一样. h ...
- uva 1308 - Viva Confetti
这个题目的方法是将圆盘分成一个个圆环,然后判断这些圆环是否被上面的圆覆盖: 如果这个圆的圆周上的圆弧都被上面的覆盖,暂时把它标记为不可见: 然后如果他的头上有个圆,他有个圆弧可见,那么他自己本身可见, ...
- Android 给ListView设置Adapter
Adapter: class MyAdapter extends BaseAdapter { private List<Person> personList; public MyAdapt ...
- [转贴]一个将表格变成 INSERT 的SQL 语句的存储过程（sql server)
来源自http://vyaskn.tripod.com/code.htm#inserts SET NOCOUNT ON GO PRINT 'Using Master database' USE mas ...
- POP3、SMTP、IMAP和Exchange的区别在哪里？
著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.作者:永遇乐链接:http://www.zhihu.com/question/24605584/answer/29039357来源: ...