弹出层-使用jquery的blockui插件

最新推荐文章于 2024-09-24 14:57:27 发布

原创最新推荐文章于 2024-09-24 14:57:27 发布 · 466 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #button #function #input #css #div

jquery 专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何使用 jQuery BlockUI 插件创建页面遮罩效果。通过下载插件并将其引入项目中，可以利用该插件显示加载提示框等。示例展示了通过按钮点击触发遮罩显示的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官方地址：http://jquery.malsup.com/block/#demos

使用方法：

1：下载插件：http://jquery.malsup.com/block/#download

2：引入插件：<script type="text/javascript" src="<%=basePath%>/js/plugins/jquery.blockUI.js"></script>

3：假设有这样一个按钮：<input type="button" onclick="add();" value="添加"/>

function add(){
	$.blockUI({ 
		message: $('#userdiv'),
		css: {width: '375px',top: '10%'} 
	}); 
	$.get(
			'findUser.action?aaa='+Math.random(),
			{
				realName:''
			},
			function(data){
				$("#showStudentList").html(data);
			}
	);
}

<div id="userdiv" style="display:none;cursor:default">
		<table id="showStudentList">
			<tr>
				<td>用户名：</td>
				<td><input id="txtUserName" type="text" /></td>
			</tr>
			<tr>
				<td>密　码：</td>
				<td><input id="txtPwd" type="text" /></td>
			</tr>
			<tr>
				<td><input id="btnLogin" type="button" value="登录" /></td>
				<td><input id="btnCancel" type="button" value="取消" /></td>
			</tr>
		</table>
	</div>