Jquery超简单遮罩层实现代码

时间：2021-04-16

　　在开发中，为了避免二次提交，遮罩层的运用越来越普遍。

　　看了很多代码，下面跟大家分享一下我认为最简单的遮罩层实现方式：

　　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;　　
　　　　　　}　　
　　</style>　　

　　其中： opacity:0.5;适用于IE， -moz-opacit:0.5;适用于火狐；你只需要都加上，便可以火狐和IE下都可以使用。

　　2.指定层的高度、和宽度。

　　js代码

　　<pre class="html" name="code"><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:;" onclick="showMask()" >点我显示遮罩层</a><br />

　　4.使用方法：

　　在ajax提交表单后，加上showMask方法，数据返回后，加上hideMask()。

　　需要的亲们可以根据自己需求，在遮罩层上面加一些提示信息。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章