JavaScript实现遮罩层
2016-03-07 16:43
218 查看
<!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>
运行结果
相关文章推荐
- js 对cookie 的操作
- 详解JavaScript数组和字符串中去除重复值的方法
- JS-BOM常用对象
- js限制文本框只能输入数字方法小结
- poj 3255 Roadblocks(spfa次短路 || Dijsktra)
- js输入框验证
- Javascript中的函数数学运算
- Js闭包详解
- JS判断是否是首页 ,404页
- Javascript闭包
- ExtJs6 Desktop Demo 修改测试
- JS原型和继承
- JavaScript中将数组进行合并的基本方法讲解
- js数组排序神器
- NSDictionary转换成JSON字符串
- {}+[]与console.log({}+[])结果不同?从JavaScript的大括号谈起
- 读取等待 纯H5 JS
- 通过js来修改div的style(background,border,。。。。。。。)
- 纯js h5 弹出框
- js和oc相互交互