3

我正在使用来自 AjaxToolkit 的 ModalPopupExtender 用于 asp.net。我正在尝试使用不同的按钮触发 ModalPopupExtender。问题是，除非我使用 TargetControlID，否则弹出窗口会在一秒钟内打开并快速关闭。我需要这个弹出窗口可以通过几个不同的按钮访问，每次都使用同一个面板。

下面的代码应该很好地复制了这个问题，在我的实际应用程序中它几乎可以正常工作。甚至内容正在使用弹出窗口的选定面板进行更新，除了当我从 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>

谢谢

4

2 回答 2

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;
}
于 2013-03-02T11:13:01.363 回答
2

现在很晚了，但希望这对正在寻找答案的人有所帮助。
单击时，会发生回发并重新加载页面。如果您使用updatepanel，那么您的弹出消息将在页面加载后保留。请参阅下面的示例：

象素：

<%@ 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();
    }
}
于 2013-05-25T20:40:57.943 回答