最近在做ASP的项目,在处理像原页面锁定,弹出操作框或提示框这样的碰到了钉子,虽然技术以及代码都是现成的,但是感觉网上搜索匹配的也很少,所以发一篇博文记录一下。
效果图如下:
部分代码:
<asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager>
<asp:UpdatePanel runat="server" ID="UpdatePanel1">
<ContentTemplate>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.blockUI.js"></script>
<script type="text/javascript" src="js/chili-1.7.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#demo1').click(function() {
$.blockUI({ message: $('#loginForm')});
$('#Button1').click($.unblockUI);
$('#Button2').click($.unblockUI);
$('#loginForm').parent().appendTo(jQuery("form:first"));
});
}); </script>
<asp:Button ID="demo1" runat="server" Text="弹出遮罩层" />
这里需要注意的有一下三点(红色字体标注):
1.四个js文件路径一定要写对
2.#后面为控件ID,如果该页面继承了母版,那么需要将'#demo1'改写为'#<%=demo.ClientID %>',这是因为客户端生成页面后怕母版和继承于母版的页面某些控件的ID会冲突,所有控件ID会重新生成一次。
3.要触发button服务器端的事件,必须加上$('#loginForm').parent().appendTo(jQuery("form:first"));这行代码保证了当前遮罩层所属form和母版form是同一个。