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 ...
随机推荐
- 如何在版本控制工具中管理Sencha Architect的項目
根據數次痛苦的經歷結合stack overflow上的解答,發現原來還是可以使用svn.git之類的版本控制工具管理Sencha Architect生成的項目的. 具體的要點如下,假定項目記作{PRO ...
- delphi cxgrid导出excel去除货币符号
版本 : devexpress 13.1.4 打开 包在ExpressExportLibary目录中. 修改FCells.SetCellDataCurrency为FCells.SetCellData ...
- 详解C/C++函数指针声明
要理解一个C程序,仅仅理解组成该程序的符号是不够的.程序员还必须理解这些符号是如何组合成声明.表达式.语句和程序的. 我们先来看看下面的一个语句: 1 ( *( void(*)())0)(); 这是当 ...
- 国内物联网平台初探（八）：移动云OneNET
国内物联网平台初探(八)——移动云OneNET 平台架构 数据模型 使用场景示意图 服务 IOT Paas 基础服务 为IoT开发者提供智能设备自助开发工具.后台技术支持服务,为您提供物联网专网.短彩 ...
- ubuntu14.04下unix网络编程环境的配置
建议 unpv13e/README看一下,忽略一下内容 ===================================================================== 操作 ...
- Java多线程初学者指南（5）：join方法的使用
在上面的例子中多次使用到了Thread类的join方法.我想大家可能已经猜出来join方法的功能是什么了.对,join方法的功能就是使异步执行的线程变成同步执行.也就是说,当调用线程实例的start方 ...
- .h头文件、 .lib库文件、 .dll动态链接库文件之间的关系
转自.h头文件. .lib库文件. .dll动态链接库文件之间的关系 h头文件作用:声明函数接口 dll动态链接库作用:含有函数的可执行代码 lib库有两种: (1)静态链接库(Static Liba ...
- 一周一话题之一（EF-CodeFirst、MEF、T4框架搭建学习）
本话题是根据郭明峰博客<MVC实用架构系列>的搭建学习总结. -->目录导航 一.数据仓储访问的构建 1.UnitOfWork的构建 2.Repository的构建 ...
- bzoj2186
首先我们看到题目要求的是1~N!内有M!互质的个数 N!>M!,而我们是知道在M!以内与M!互质的数的个数,即phi(M!) 但是M!~N!内与M!互质的数有多少个呢? 对于每个互质的数,如果我 ...
- Android模拟器——Genymotion
还在用Android原生模拟器?向你推荐一款全方位把Android原生模拟器秒成渣渣的神器:Genymotion! 需要理由? 性能卓越作为历史上最快的Android模拟器(没有之一),秒级开机关机速 ...