最近在做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是同一个。