模态弹出扩展器在.show()之后自动关闭

本文关键字：之后 扩展器 show 模态 | 更新日期: 2023-09-27 18:01:45

我使用ModalPopupExtender从AjaxToolkit的asp.net。我试图有一个ModalPopupExtender触发不同的按钮。问题是，除非我使用TargetControlID弹出打开并在一秒钟内迅速关闭。我需要这个弹出是可访问的通过几个不同的按钮，每次使用相同的面板。

下面的代码应该很好地复制了这个问题，在我的实际应用程序中，它几乎工作得很好。即使内容被更新与弹出窗口的选择面板除了它关闭后约1/2秒当我调用。show()从OnClientClick; 
<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>

谢谢

模态弹出扩展器在.show()之后自动关闭

可以这样使用

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

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