Question

早上好。我有一个模态弹出窗口，我在我的网站上的每个命令的整个加载周期的长度显示触发完整的回发或甚至部分渲染。到目前为止，它是可靠的，运行良好有一些问题，但据我所知，ASP不是为此设计的，但我想召唤我最好的黑客一起开发解决方案。请收听。

所以在windows.onunload以及BeginRequestHandler事件上我触发modal popup.show。这部分效果很好。弹出窗口即刻显示。有三个问题：

1）window.onload并不总是被调用，因此在部分渲染时不可靠。我必须使用一个名为EndRequestHandler的事件来调用modal popup.hide。这里的问题是EndRequestHandler太快被调用，如果有一个window.onload被触发，EndRequestHandler将在它之前被调用，并且它过早地隐藏了弹出窗口。这会导致页面显示弹出窗口，然后立即再次隐藏它，这是错误的。我不希望弹出窗口隐藏，直到页面100％完成加载，无论是完整的100％回发完全渲染重新加载还是部分渲染不会触发母版页中的页面加载完成。我还应该提到所有这些代码都发生在母版页中，所以每个其他页面都继承了这个功能，看起来很好。

2）另一个问题是弹出窗口无法在回发中存活。一旦页面被卸载，它就会破坏它的弹出窗口。我希望弹出窗口能够在回发中存活并继续显示，直到调用window.onload。事实上，还有一个问题是，即使我在window.onload事件中调用modal popup.hide，我也注意到在onload事件被调用之前弹出窗口隐藏了。 WTF怎么可能呢？我想在console.log说window.onload后立即隐藏它。它可能与处理onload事件之前发生的渲染或沿着这些线的某些事情有关。

这是我在Site.Master中的代码，你会看到我注释了一些微调代码，这只是一个不同的弹出式示例，你可以忽略它：

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
    <title></title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
    <script src="http://fgnass.github.io/spin.js/spin.min.js"></script>
    <style type="text/css">
.modalBackground {
    background-color:Blue;
    filter:alpha(opacity=30);
    opacity:0.3;
}   
.modalPopup {
    background-color:white;
    border-width:3px;
    border-style:solid;
    border-color:Gray;
    padding:3px;
    width:250px;
}
</style>
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body id="body">
      <script type="text/javascript">
          var opts = {
              lines: 13, // The number of lines to draw
              length: 22, // The length of each line
              width: 11, // The line thickness
              radius: 32, // The radius of the inner circle
              corners: 1, // Corner roundness (0..1)
              rotate: 59, // The rotation offset
              direction: 1, // 1: clockwise, -1: counterclockwise
              color: '#000', // #rgb or #rrggbb or array of colors
              speed: 1.5, // Rounds per second
              trail: 54, // Afterglow percentage
              shadow: false, // Whether to render a shadow
              hwaccel: false, // Whether to use hardware acceleration
              className: 'spinner', // The CSS class to assign to the spinner
              zIndex: 2e9, // The z-index (defaults to 2000000000)
              top: '50%', // Top position relative to parent
              left: '50%' // Left position relative to parent
          };

          window.onbeforeunload = function () {
              //var target = document.getElementById('body');
              //var spinner = new Spinner(opts).spin(target);
              //var spinner = new Spinner().spin();
              //target.appendChild(spinner.el);
              console.log("onbeforeunload");
              document.getElementById("Button1").click(); //hiddenTargetControlForModalPopup
              //document.getElementById("hiddenTargetControlForModalPopup").click();

              var modalPopupBehavior = $find('programmaticModalPopupBehavior');
              modalPopupBehavior.show();
          };

          window.onload = function () {
              console.log("onload");

              var modalPopupBehavior = $find('programmaticModalPopupBehavior');
              modalPopupBehavior.hide();
          };

          function BeginRequestHandler(sender, args) {
              //Some code
              //var target = document.getElementById('body');
             // var spinner = new Spinner(opts).spin(target);
              //var spinner = new Spinner().spin();
              //target.appendChild(spinner.el);
              console.log("BeginRequestHandler");
              var modalPopupBehavior = $find('programmaticModalPopupBehavior');
              modalPopupBehavior.show();
          }
          function EndRequestHandler(sender, args) {
              //Some code
              console.log("EndRequestHandler");
              var modalPopupBehavior = $find('programmaticModalPopupBehavior');
              modalPopupBehavior.hide();

             // var target = document.getElementById('body');
              //var spinner = new Spinner(opts).spin(target);
             // $(target).data('spinner', spinner);
             // $('#body').data('spinner').stop();
          }

          function pageLoad(sender, args) {
              console.log("pageload");

              var prm = Sys.WebForms.PageRequestManager.getInstance();
              prm.add_beginRequest(BeginRequestHandler);
              prm.add_endRequest(EndRequestHandler);
          }
    </script>
    <form runat="server">
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" EnablePartialRendering="true" runat="server"></asp:ToolkitScriptManager>
        <asp:UpdatePanel runat="server" ChildrenAsTriggers="true" ID="UpdatePanel6" UpdateMode="Always">
    <ContentTemplate> 
        <asp:Button runat="server" style="display:none;" OnClick="Button1_Click" ID="Button1"/>
        <asp:Button runat="server" style="display:none;" ID="hiddenTargetControlForModalPopup"/>
         <asp:ModalPopupExtender runat="server" ID="programmaticModalPopup"
        BehaviorID="programmaticModalPopupBehavior"
        TargetControlID="hiddenTargetControlForModalPopup"
        PopupControlID="programmaticPopup" 
        BackgroundCssClass="modalBackground"
        DropShadow="True"
        PopupDragHandleControlID="programmaticPopupDragHandle"
        RepositionMode="RepositionOnWindowScroll" >
    </asp:ModalPopupExtender>
            <asp:Panel runat="server" CssClass="modalPopup" ID="programmaticPopup" style="display:none;width:350px;padding:10px">
                <asp:Panel runat="Server" ID="programmaticPopupDragHandle" Style="cursor: move;background-color:#DDDDDD;border:solid 1px Gray;color:Black;text-align:center;">
                    Processing... Please Wait...
                </asp:Panel>
                    <br />
                    <div style="text-align:center;"><img src="images/loader.gif" /></div>
            </asp:Panel> 
    </ContentTemplate>
</asp:UpdatePanel>
    <div class="page">
        <div class="header">
            <div class="title">
                <h1>
                    <asp:Label ID="lblTitle" runat="server" Text="Home"></asp:Label><br />
                </h1>
            </div>
            <div class="loginDisplay">
                <asp:Label ID="LoginStatus" runat="server" Text="Not logged in."></asp:Label>
            </div>
            <div class="clear hideSkiplink">
                 <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" 
                    EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
                     <DynamicMenuItemStyle CssClass="dynamic" />
                    <Items>
                        <asp:MenuItem NavigateUrl="~/Home.aspx" Text="Home"></asp:MenuItem>
                        <asp:MenuItem NavigateUrl="~/PrizeListing.aspx" Text="Prize Listing">
                        </asp:MenuItem>
                        <asp:MenuItem Text="Administration" 
                            Value="Administration" Selectable="False">
                            <asp:MenuItem Text="Users" Value="Users" NavigateUrl="~/Admin.aspx?mode=users"></asp:MenuItem>
                            <asp:MenuItem Text="Prizes >" Value="Prizes" NavigateUrl="~/Admin.aspx?mode=prizes">
                            <asp:MenuItem Text="Prizes GL Codes"  Value="Prizes GL Codes" NavigateUrl="~/PrizesGLCodes.aspx">
                            </asp:MenuItem>
                            </asp:MenuItem>
                            <asp:MenuItem Text="Tournaments  >" Value="Tournaments" NavigateUrl="~/tournaments.aspx">
                                <asp:MenuItem Text="Tournament Templates"  Value="Tournament Templates" NavigateUrl="~/TournamentTemplates.aspx">
                            </asp:MenuItem>
                            </asp:MenuItem>
                           <asp:MenuItem Text="Winners >" Value="Winners" NavigateUrl="~/Admin.aspx?mode=winners">
                             <asp:MenuItem Text="Issue Bounty Prizes" NavigateUrl="~/IssueBountyPrizes.aspx"></asp:MenuItem>
                             <asp:MenuItem Text="Merged\Banned Players"  Value="Merged\Banned Players" NavigateUrl="~/BannedAndHiddenPlayers.aspx">
                            </asp:MenuItem>
                           </asp:MenuItem>
                            <asp:MenuItem Text="Inventory >" Value="Inventory" 
                                NavigateUrl="~/Inventory.aspx">
                            <asp:MenuItem Text="Reconciliation Notes" Value="Reconciliation Notes" 
                                NavigateUrl="~/ReconciliationNotes.aspx">
                            </asp:MenuItem>
                            </asp:MenuItem>
                            <asp:MenuItem NavigateUrl="~/ReceiveInventory.aspx" Text="Receive Inventory" 
                                Value="Receive Inventory"></asp:MenuItem>
                        </asp:MenuItem>
                        <asp:MenuItem Text="Reports" 
                            Value="Reports" Selectable="False">
                            <asp:MenuItem NavigateUrl="~/ReportsAllPrizes.aspx" Text="All Prizes" 
                                Value="All Prizes"></asp:MenuItem>
                            <asp:MenuItem NavigateUrl="~/ReportsPhysicalPrizes.aspx" 
                                Text="Physical Prize Audit" Value="Physical Prize Audit"></asp:MenuItem>
                            <asp:MenuItem NavigateUrl="~/ReportsReconciliation.aspx" Text="Reconciliation" 
                                Value="Reconciliation"></asp:MenuItem>
                                <asp:MenuItem NavigateUrl="~/ReportsExactTargetEmailHistory.aspx" Text="ExactTarget Email History" 
    Value="ExactTargetEmailHistory"></asp:MenuItem>
                        </asp:MenuItem>
                        <asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>
                    </Items>
                </asp:Menu>
            </div>
        </div>
        <div class="main">
            <asp:ContentPlaceHolder ID="MainContent" runat="server"/>
        </div>
        <div class="clear">
        </div>
    </div>
    <div class="footer">

    </div>
    </form>
</body>
</html>

这是弹出窗口的样子： enter image description here

莫代尔弹出没有幸存的回发ASP

0 个答案: