堆棧內存溢出
  簡體   English   中英

頁面加載期間的模式彈出有時不會隱藏：ASP.NET C＃Javascript Jquery

[英]Modal popup during page load not hiding sometimes: ASP.NET C# Javascript Jquery

 原文  2014-11-24 19:56:53  9   1    javascript/ c#/ jquery/ html/ asp.net

問題描述

我有一個ajax模式彈出窗口，它在頁面加載期間顯示，然后在頁面加載完成時隱藏，所有這些代碼都在母版頁中進行。 問題在於，對於某些按鈕單擊，它們不會觸發javascript事件window.onload被調用或pageload在ASP中完成或呈現事件。 他們僅調用卸載前事件並提交事件。 發生這種情況時，我注意到彈出窗口不會隱藏，因為從未調用過window.onload。 否則，它會很好地工作。 有誰知道一種方法，可以確保始終隱藏彈出窗口，而不必在不重新加載整個頁面的每個按鈕單擊代碼中隱藏彈出窗口？ 參見下面的代碼。

母版頁： 

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="OnlinePrizing.SiteMaster" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<!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 type="text/javascript">
    function showPopup(who) {
        console.log("show called: " + who);
        var modalPopupBehavior = $find('programmaticModalPopupBehavior');
        modalPopupBehavior.show();
    }
    function hidepopup(who) {
        console.log("hide called: " + who);
        var modalPopupBehavior = $find('programmaticModalPopupBehavior');
        modalPopupBehavior.hide();
    }

    window.onbeforeunload = function () {
        showPopup('window.onbeforeunload');
    };

    window.onsubmit = function () {
        showPopup('window.onsubmit');
    };

    window.onload = function () {
        hidepopup('window.onload');
    };
    </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>
    <form runat="server">
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" EnablePartialRendering="true" runat="server"></asp:ToolkitScriptManager>
    <asp:Button runat="server" ID="hiddenTargetControlForModalPopup" style="display:none"/>
        <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> 
    <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>

您會注意到，搜索按鈕導致girdview.databind，該頁面導致頁面調用window.load。 但是，您會注意到，導出按鈕不會調用任何東西來重新加載頁面，因此不會觸發window.load事件，這是我隱藏彈出窗口的地方，因此它將一直保持下去。

這是頁面之一。

這是頁面之一。

導出按鈕不會觸發window.load，因此它無法隱藏模式彈出窗口 導出按鈕不會觸發window.load，因此它無法隱藏模式彈出窗口。

1 個解決方案

解決方案1
 0  2014-11-24 20:14:22

您可以通過BeginRequestHandler和EndRequestHandler事件來處理。 我認為您需要類似下面的內容，並刪除其他方法（ onload和onbeforeunload ）。 頁面請求開始時，顯示模式彈出窗口，頁面請求結束時，則隱藏模式彈出窗口。 對於像您這樣的類似問題，請在這里參考我的其他答案。 

<script type="text/javascript">
    function pageLoad(sender, args) {
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_beginRequest(BeginRequestHandler);
        prm.add_endRequest(EndRequestHandler);
    }

    function BeginRequestHandler(sender, args) {
        var modalPopupBehavior = $find('programmaticModalPopupBehavior');
        modalPopupBehavior.show();
    }

    function EndRequestHandler(sender, args) {
        var modalPopupBehavior = $find('programmaticModalPopupBehavior');
        modalPopupBehavior.hide();
    }
</script>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 asp.net使用JavaScript和C＃刪除彈出窗口 ASP.Net C# JavaScript 彈出窗口 Window 幫助 將Telerik ASP.NET Ajax RadGrid加載到模式彈出窗口中，並通過Ajax刷新數據而無需頁面刷新 如何在頁面加載時動態加載圖像 jquery asp.net c# 如何使用 asp.net C# 在頁面加載時綁定 JavaScript 事件 我需要檢測是否在c＃的asp.net頁面加載中啟用了javascript 使用JavaScript從頁面加載背后的代碼中添加css類加載asp.net C＃ ASP.net C＃中的彈出式計算器 ASP.net，C＃頁面加載燈箱關閉問題 ASP.NET C＃使用Twitter Bootstrap 3.0的模式彈出窗口上傳文件
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM