jQuery 遮罩层
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery 遮罩层</title> <link rel="stylesheet" type="text/css" href="css/base.css" /> <style type="text/css"> /* 半透明的遮罩层 */ #overlay { background: #000; filter: alpha(opacity=50); /* IE的透明度 */ opacity: 0.5; /* 透明度 */ display: none; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 100; /* 此处的图层要大于页面 */ display:none; _background-color:#a0a0a0; /* 解决IE6的不透明问题 */ } </style> <script type="text/javascript" src="js/jquery-1.10.1.min.js"></script> <script type="text/javascript"> /* 显示遮罩层 */ function showOverlay() { $("#overlay").height(document.body.scrollHeight); $("#overlay").width(document.body.scrollWidth); // fadeTo第一个参数为速度,第二个为透明度 // 多重方式控制透明度,保证兼容性,但也带来修改麻烦的问题 $("#overlay").fadeTo(200, 0.5); // 解决窗口缩小时放大后不全屏遮罩的问题 // 简单来说,就是窗口重置的问题 $(window).resize(function(){ $("#overlay").height(document.body.scrollHeight); $("#overlay").width(document.body.scrollWidth); }); } /* 隐藏覆盖层 */ function hideOverlay() { $("#overlay").fadeOut(200); } </script> </head> <body> <button onClick="showOverlay();" style=" width:100px; height:60px; margin:40px auto 40px auto; display:block;">打开遮罩层</button> <button onClick="hideOverlay();" style=" width:100px; height:60px; z-index:101; display:block; position:absolute; left:10px; top:10px;">关闭遮罩层</button> <h3 align="center"><a href="http://onestopweb.iteye.com/">阅谁问君诵,水落清香浮。</a></h3> <div style="height:10000px;"></div> <div id="overlay"></div> </body> </html>
效果图:
PS:兼容IE6+,火狐,谷歌,苹果,欧朋等主流的浏览器。
相关推荐
cbao 2019-12-29
浪味仙 2019-12-24
Hhjian 2014-05-31
人心 2012-02-05
zhanghao 2016-11-24
攻城师 2019-06-28
asdjkl 2017-05-18
海欣海夜 2015-06-29
最近用phonegap在安卓手机中使用Html5+css3做页面,<a name="yes" data-role="button" style="display: block;font-size:16
ruanjianxiong 2014-08-17
83540198 2014-08-01
DevilPace 2014-05-31
Kindlecode 2012-10-27
83510998 2012-04-28
89203856 2012-04-17
83453065 2012-03-14
AnyBisks 2012-02-23
yyzhu 2011-09-27
ElementW 2011-09-06