Question

我正在使用AjaxToolkit中的ModalPopupExtender for asp.net。我试图用不同的按钮触发ModalPopupExtender。问题是，除非我使用TargetControlID，否则弹出窗口会在一秒钟内快速关闭。我需要这个弹出窗口才能访问通过几个不同的按钮，每次使用相同的面板。

下面的代码应该很好地复制问题，在我的实际应用程序上几乎可以正常工作。甚至内容也会使用弹出窗口的所选面板进行更新，除非它在大约1/2秒后关闭，当我从OnClientClick调用.show（）时;

<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>

由于

Answer 1

你可以这样使用

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;
}

Answer 2

现在已经很晚了，但希望这可以帮助那些正在寻找答案的人单击时，将发生回发并重新加载页面。如果您使用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();
    }
}

模态弹出扩展器在.Show（）之后自动关闭

2 个答案: