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

jquery遮罩层效果

2015-09-29 13:37 615 查看

例如点击登录后弹出一个遮罩层“正在登录，请稍后....”，此时用户是不能操作的。代码如下：

前提先引入 jquery-xxxx.min.js、jquery.blockUI.js，这两个js在网上到处都有，我就不多说了。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="script/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="script/jquery.blockUI.js"></script>
</head>
<body>
<div id="question" style="display: none;">
登录中，请稍后... ...
</div>
<button onclick="showTip();">登陆</button>
<script type="text/javascript">
function showTip(){
//出现遮罩层效果
$.blockUI(
{
message: $('#question'),
css:
{ width: '275px',
height:'50px',
left: ($(window).width() - 275) / 2 + 'px',
top:( $(window).height() - 50)/ 2 + 'px'  }
}
);
setTimeout(function(){
//解除遮罩层效果
$.unblockUI();
}, 3000)
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航