【jQuery】遮罩效果的实现

最新推荐文章于 2019-10-28 15:29:40 发布

励志故事

最新推荐文章于 2019-10-28 15:29:40 发布

阅读量3.4k

点赞数 1

分类专栏： Web前端文章标签：遮罩效果 jquery 遮罩层

本文链接：https://blog.csdn.net/LZGS_4/article/details/49618795

版权

实习期间，作者通过jQuery实现了一个简单的遮罩效果，用于在数据处理期间防止用户交互导致数据错误。遮罩层通过覆盖屏幕的div实现，代码简洁，展示了如何在需要时显示和隐藏遮罩层。

摘要由CSDN通过智能技术生成

暑假的实习，本来不怎么懂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>
	<in