Untitled

How to check and stop multiple postbacks for Updateprogress inside an updatepanel
<style type="text/css">
        .Background
        {
            position: fixed; left: 0; top: 0; z-index: 10; width: 100%;height: 100%;
            filter: alpha(opacity=40);
        }
    </style>
    <script type="text/JavaScript" language="JavaScript">
        function pageLoad() {
            var manager = Sys.WebForms.PageRequestManager.getInstance();
            manager.add_endRequest(endRequest);
            manager.add_beginRequest(OnBeginRequest);
        }
        function OnBeginRequest(sender, args) {
            var postBackElement = args.get_postBackElement();
            if (postBackElement.id == 'Button1') {
                $get('UpdateProgress1').style.display = "block";
            }
                $get('ParentDiv').className = 'Background';
        }
        function endRequest(sender, args) {
            $get('ParentDiv').className = '';
        }  </script>

<asp:ScriptManager ID="ScriptManager1" runat="server" />
         <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
        <div id="ParentDiv">
            <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <td height="403">
                    <iframe id="IFOEvent" name="InIframe" scrolling="auto" runat="server"
                        width="75%" height="203" class=""></iframe>
                </td>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Button1" />
            </Triggers>
        </asp:UpdatePanel>
        </div>
    <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
        <ProgressTemplate>
            <div id="IMGDIV" align="center">
                <img src="Images/loading.gif" alt="" /><br />
                </div>
            </ProgressTemplate>
        </asp:UpdateProgress>

var temp = 0;