Search code examples
modalpopupextender

ModalPopUpExtender makes popupcontrol invisible


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
    <link href="Styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <form id="form1" runat="server">
    <asp:scriptmanager ID="sc1" runat="server"></asp:scriptmanager>

<asp:LinkButton ID="LinkButton1" runat="server" CssClass="links"
Visible="true">LinkButtonABCDEFGHIJKLMNOPQRSTUVWXYZ</asp:LinkButton>
<asp:Panel ID="Panel1" runat="server" Width="100%" Height="100%" style="display:none;">
  Display text.
</asp:Panel>
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" 
   TargetControlID="Panel1" PopupControlID="LinkButton1">
</cc1:ModalPopupExtender>
</form>

This is my code. I have tried on IE8, chrome, Safari and in all three as the page loads the LinkButton just disappears. Am I doing something wrong there?


Solution

  • I don't know whether I remember correctly, but your TargetControlID should be your LinkButton which should activate the popup. There is some convention to do so. I read the book Asp.net Ajax in Action, where it was described. Unfortunately I don't remember why. Your PopupControlID should be the panel.

    So I guess it should look like

    <asp:LinkButton ID="LinkButton1" runat="server" CssClass="links"
    Visible="true">LinkButtonABCDEFGHIJKLMNOPQRSTUVWXYZ</asp:LinkButton>
    
    <asp:Panel ID="Panel1" runat="server" Width="100%" Height="100%" style="display:none;">
    </asp:Panel>
    <cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" 
       TargetControlID="LinkButton1" PopupControlID="Panel1">
    </cc1:ModalPopupExtender>
    

    Take a look at the sample here.