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 ...
随机推荐
- LinkedHashMap和HashMap的比较使用（转载）
LinkedHashMap和HashMap的比较使用 ? import java.util.HashMap; import java.util.Iterator; import java.util.L ...
- 用Python和Django实现多用户博客系统——UUBlog
又过了一周,把代码整个的优化和完善了一下,也把TBlog更名为UUBlog.这次基本是把上次的整个更新了一下具体的功能大家可以下载后自己看看说一下主要的变化增加了频道表.博客表. 功能方面主要有增加频 ...
- share my tools With Xcode
1.让Xcode的控制台支持LLDB类型的打印 在Xcode断点调试的时候, 在控制台输入 po self.view.frame 或者 po id 类型的时候就死翘翘了. 进入正题: 安装LLDB调试 ...
- iOS 9 适配
一.iOS9 bitcode首先最大的问题就是坑货xcode7,xcode7默认是打开bitcode的,bitcode是苹果为了解决他自己以后的应用可以随意更换硬件的处理做的准备也就是arm指令集和x ...
- Xcode6 Xcode7 Xcode 官方链接 －－备用
Xcode 6 官方下载链接: http://adcdownload.apple.com//wwdc_2014/xcode_6_beta_ie8g3n/xcode_6_beta.dmg Xcode ...
- Matlab R2012b启动出现License Manager Error -15
1.找到已安装文件目录下的etc文件夹(如:D:\programfile\matlab\R2012B\etc),找到license.dat文件,复制:2,找到已安装文件目录下的licenses文件夹( ...
- PS制作独特火焰立体文字
效果图中的文字部分并不复杂,为简单的立体字,用图层样式及手工复制就可以做好.火焰部分稍微有点复杂,用动感及火焰素材叠加,然后再加上火花及炫光等渲染出动感效果即可.最终效果 素材下载:本教程中需要用到的 ...
- linux线程（一）基本应用
有感而发(可以直接忽略~):每次要用到线程,都要在网上重新学下基础,例子倒是不少:一种是排版好,讲的不全又不是自己想要的:一种是排版不好,直接略过了.两者兼有的又要苦苦寻找,所以还是自己总结了,觉得每 ...
- [wikioi]乘积最大
http://wikioi.com/problem/1017/ 划分型动态规划1.转移方程是:f[i][j]=max(f[k][j-1]*t[k+1][i]),f[i][j]表示前面i个字符加上j个乘 ...
- 【HDOJ】4553 约会安排
线段树.线段树的细节很重要,小数据遍历可以发现问题. /* 4553 */ #include <iostream> #include <string> #include < ...