您的位置：首页 > Web前端 > JQuery

【jQuery】遮罩效果的实现

2015-11-03 17:04 316 查看
暑假的实习，本来不怎么懂JavaScript的我，写了挺多JavaScript或者是jQuery的一些小效果，现在记录下来，方便以后查看。

遮罩效果一般用在数据处理需要一定时间，这段等待的时间不希望用户去点击按钮或者是修改数据，那么就会用到遮罩层，等到数据处理完毕之后，再关闭遮罩层，这样子就可以避免数据出错了。

遮罩效果其实非常简单，就是用一个div挡住屏幕即可，我们只需事先写好一个顶层的div遮罩层，在需要的时候显示。废话不多说，直接贴代码了，我这里使用了jQuery，也可以不用。

<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
$("#bg").show();//显示遮罩层
alert("遮罩演示");
$("#bg").hide();//关闭遮罩层
})
})
</script>
</head>

<body>
<input type="button" value="遮罩层演示" id="btn">

<!--这是遮罩层，默认是不显示的，设置透明度为0.5-->
<div id="bg" style="display:none;position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 1040;background-color:black;opacity: 0.5">

</body>
</html>
遮罩层，一般都会设置透明度，透明度的大小就根据自己的需求设置咯。我这里只是简单的做个演示，一般情况上，在遮罩层显示和关闭的中间部分就是写数据的处理，处理完毕之后就关闭遮罩层。

效果如下：



Author：立礼

Sign：人生不要有太多的幻想，而要有更多的行动。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航