2013-03-02 115 views
3

我使用AjaxToolkit的ModalPopupExtender for asp.net。我正在尝试使用不同的按钮触发ModalPopupExtender。问题是,除非我使用TargetControlID,否则弹出窗口会打开并在一秒之内快速关闭。我需要这个弹出框可以通过几个不同的按钮访问 ,每次都使用同一个面板。Modal Popup Extender自动关闭后.Show()

下面的代码应该很好地复制问题,在我的实际应用程序它几乎可以正常工作。即使内容正在使用弹出窗口的选定面板进行更新,除了当我从OnClientClick调用.show()约1/2秒后它会关闭;

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head id="Head1" runat="server"> 
<title>Untitled Page</title> 
<script language="javascript" type="text/javascript"> 
    //Function to Hide ModalPopUp 
    function Hidepopup() { 
     $find('AjaxPopupHi').hide(); 
    } 
    //Function to Show ModalPopUp 
    function Showpopup() { 
     $find('AjaxPopupHi').show(); 
    } 

</script> 

</head> 

<form id="form1" runat="server"> 

<asp:LinkButton ID="lnk" OnClientClick = "Showpopup()" runat="server" Text="hi"></asp:LinkButton> 


<asp:ScriptManager ID="ScriptManager1" runat="server"> 
</asp:ScriptManager> 
<br /> 

<asp:Button ID="Button_dummy" Style="display: none" runat="server" Text="Button" /> 

<ajaxToolKit:ModalPopupExtender ID="mpe" runat="server" BehaviorID="AjaxPopupHi" TargetControlID="Button_dummy" PopupControlID="pnl" 
    CancelControlID="close" /> 

<!--BELOW panel does not remain OPEN :/--> 
<asp:Panel ID="pnl" runat="server" CssClass="popupPanel"> 
    <div> 
     Hi!!! 
    </div> 
    <asp:Button ID="close" runat="server" Text="Close" /> 
</asp:Panel> 


</form> 

感谢

回答

7

您可以使用这样

OnClientClick = "return Showpopup()" 


function Showpopup() { 
    $find('AjaxPopupHi').show(); 
    return false; 
} 

您必须在您OnClientClick使用return结合你的代码

<asp:LinkButton ID="lnk" OnClientClick = "return Showpopup()" runat="server" Text="hi"> 
</asp:LinkButton> 

和您的javascript函数应该像

function Showpopup() { 
    $find('AjaxPopupHi').show(); 
    return false; 
} 
+0

非常感谢,也很好地解决了我的问题! – 2013-03-02 11:25:09

+0

不客气。 – 2013-03-02 11:25:52

1

这是很晚了,但让希望这有助于正在寻找答案的人。
当您单击时,发生回发并重新加载页面。如果您使用updatepanel,那么您的弹出消息将在页面加载后保留。见下面这个例子:

.aspx的:

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %> 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Popup.aspx.cs" Inherits="Popup_example_Popup" %> 

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <script type="text/javascript"> 

     //Function to Hide ModalPopUp 
     function Hidepopup() { 
      $find('AjaxPopupHi').hide(); 
     } 
     //Function to Show ModalPopUp 
     function Showpopup() { 
      $find('AjaxPopupHi').show(); 
     } 

    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
     <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> 

     <asp:UpdatePanel ID="udpOutterUpdatePanel" runat="server"> 
      <ContentTemplate> 

       <asp:LinkButton ID="lnk" OnClientClick="Showpopup()" runat="server" Text="hi"></asp:LinkButton> 

      </ContentTemplate> 
     </asp:UpdatePanel> 

     <br /> 

     <asp:Button ID="Button_dummy" Style="display: none" runat="server" Text="Button" /> 
     <ajaxToolkit:ModalPopupExtender ID="mpe" runat="server" BehaviorID="AjaxPopupHi" TargetControlID="Button_dummy" PopupControlID="pnl" 
      CancelControlID="close" /> 

     <asp:Panel ID="pnl" runat="server" CssClass="popupPanel"> 
      <div> 
       Hi!!! 
      </div> 

      <asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
       <ContentTemplate> 

        <asp:Button ID="close" runat="server" Text="Close" OnClick="close_Click" /> 

       </ContentTemplate> 
      </asp:UpdatePanel> 
     </asp:Panel> 


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

后面的代码:

using System; 

public partial class Popup_example_Popup : System.Web.UI.Page 
{ 
    protected void Page_Load(object sender, EventArgs e) 
    { 

    } 
    protected void close_Click(object sender, EventArgs e) 
    { 
     mpe.Hide(); 
    } 
} 
+0

一直花费数小时试图获得弹出式广告