使用jQuery怎么实现一个遮罩层?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
1.样式如下设置:
CSS代码:
<style type="text/css"> .mask { position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777; z-index: 1002; left: 0px; opacity:0.5; -moz-opacity:0.5; display:none; } </style>
其中: opacity:0.5;
适用于IE, -moz-opacit:0.5;
适用于火狐;你只需要都加上,便可以火狐和IE下都可以使用。
2.指定层的高度、和宽度。
js代码
<script type="text/javascript"> //兼容火狐、IE8 //显示遮罩层 function showMask(){ $("#mask").css("height",$(document).height()); $("#mask").css("width",$(document).width()); $("#mask").show(); } //隐藏遮罩层 function hideMask(){ $("#mask").hide(); } </script>
3.在<body>中加入如下代码,然后就可以看效果了:
html代码
<div id="mask" class="mask"></div> <a href="javascript:;" rel="external nofollow" rel="external nofollow" onclick="showMask()" >点我显示遮罩层</a><br />
4.使用方法:
在ajax提交表单后,加上showMask
方法,数据返回后,加上hideMask()
需要的亲们可以根据自己需求,在遮罩层上面加一些提示信息
可以使用在线HTML/CSS/JavaScript前端代码调试运行工具http://tools.jb51.net/code/WebCodeRun测试运行上述代码效果(不要忘记加入jQuery.js文件)。
或者可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun测试运行如下完整代码(为方便测试效果,代码做了部分改进):
<!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>www.jb51.net jQuery遮罩层</title> <style type="text/css"> .mask { position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777; z-index: 1; left: 0px; opacity:0.5; -moz-opacity:0.5; display:none; } .msg { width: 300px; height: 200px; color: #3c763d; background-color: #dff0d8; border-radius: 4px; padding: 15px; position: absolute; top: 0; text-align: center; margin: 0 auto; z-index: 999; left: 50%; margin-left: -150px; display:none; } </style> </head> <body> <div id="mask" class="mask" onclick="hideMask()"></div> <div align="center" class="msg">提示信息</div> <a href="javascript:;" rel="external nofollow" rel="external nofollow" onclick="showMask()" >点我显示遮罩层</a><br /> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> //兼容火狐、IE8 //显示遮罩层 function showMask(){ $("#mask").css("height",$(document).height()); $("#mask").css("width",$(document).width()); $("#mask").show(); $(".msg").show(); } //隐藏遮罩层 function hideMask(){ $("#mask").hide(); $(".msg").hide(); } </script> </body> </html>
看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注亿速云行业资讯频道,感谢您对亿速云的支持。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。