Question

我希望在有ajax活动时屏蔽我的网页屏幕，并在ajax活动结束时取消阻止屏幕。为此，我使用块ui。但它不适用于我的情况，我不知道为什么。这是我的代码：

<head runat="server">
<script type="text/javascript" src="jQuery 1.10.1.min.js"></script>
<script type="text/javascript" src="blockui.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);
    });
</script>
<title></title>

<body>
    <form id="form1" runat="server">
    <div>
        <input id="Button1" type="button" value="button" onclick="__doPostBack('UpdatePanel1', '');" />
    </div>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <div id="blockit" style="width: 200px; height: 200px;">
            </div>
        </ContentTemplate>
    </updatepanel>
    </form>
</body>
</html>

我不知道我的代码有什么问题。请帮帮我

Answer 1

使用UpdatePanel时，您可以使用随附的javascript函数。 jQuery函数不起作用，因为它们用于jQuery ajax调用，而不是UpdatePanel。

因此，您可以在打开和关闭全屏div的位置设置此代码。

<script type="text/javascript"> 
   // if you use jQuery, you can load them when dom is read.
   $(document).ready(function () {
       var prm = Sys.WebForms.PageRequestManager.getInstance();    
       prm.add_initializeRequest(InitializeRequest);
       prm.add_endRequest(EndRequest);
    });        

    function InitializeRequest(sender, args) {
       // Open the full wait screen
       $("#overlay").show();
    }

    function EndRequest(sender, args) {
       // close the full wait screen
       $("#overlay").hide();    
    }
</script>

更新：关于系统。 - ＆GT; http://msdn.microsoft.com/en-us/library/bb311028.aspx

和HTML上的叠加部分......

<div id="overlay" style="display:none;"> </div>

CSS

#overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color:#000;
    opacity: .75;
    z-index: 9999999;
}

叠加参考： http://dabblet.com/gist/2894437
https://stackoverflow.com/a/10945291/159270

在ajax回调上阻止屏幕

1 个答案: