本文實例講述了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.Vevb.com/code/WebCodeRun測試運行上述代碼效果（不要忘記加入jQuery.js文件）。
或者可以使用在線HTML/CSS/JavaScript代碼運行工具http://tools.Vevb.com/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.survivalescaperooms.com 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>
新聞熱點
疑難解答
圖片精選
