利用div实现遮罩层效果
2015-06-28 20:16
387 查看
利用div实现遮罩层效果就是利用一个全屏、半透明的div遮住页面上其它元素,典型的例子就是百度的登录界面。下面贴出示例代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>全屏div</title> <style> html,body { margin:0; height:100%; } #test { width:100%; height:100%; background-color:#000; position:absolute; top:0; left:0; z-index:2; opacity:0.3; /*兼容IE8及以下版本浏览器*/ filter: alpha(opacity=30); display:none; } #log_window { width:200px; height:200px; background-color:#FF0; margin: auto; position: absolute; z-index:3; top: 0; bottom: 0; left: 0; right: 0; display:none; } </style> <script> function shield(){ var s = document.getElementById("test"); s.style.display = "block"; var l = document.getElementById("log_window"); l.style.display = "block"; } function cancel_shield(){ var s = document.getElementById("test"); s.style.display = "none"; var l = document.getElementById("log_window"); l.style.display = "none"; } </script> </head> <body> <a href="javascript:shield()">打开遮罩</a> <div id="test"></div> <div id="log_window"> <a href="javascript:cancel_shield()">关闭</a> </div> </body> </html>
相关文章推荐
- emacs第一次接触
- 雷军武大演讲:快40岁时 我曾觉得梦想渐行渐远
- UVA_11039 Building Designing
- Add and Search Word - Data structure design
- 6.27博客
- JAVA基础第六天
- SpringMvc+Jdbc泛型反射BaseDao
- spring jedisTemplate操作出现key和value值出现\xac字符
- Latex listings 宏包排版代码
- 欢迎使用CSDN-markdown编辑器
- FTP服务器的搭建
- 获取必应壁纸
- CDN
- 纯属感觉摘自《笑忘书》
- 异步选择机制聊天室
- windows下非安装版 mysql配置
- LeetCode Rotate Image
- 深入探究CSS中Animations和Transitions的工作原理
- KMP算法(详细求串的next[n])
- 浅析Java中的final关键字(转)