Hi Anand,
I copied the same code you provided here but the modal popup doesnt show up. could you please.
Thanks.
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!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 id="Head1" runat="server">
<title></title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
.modalBackground
{
background-color: Black;
filter: alpha(opacity=40);
opacity: 0.4;
}
.modalPopup
{
background-color: #FFFFFF;
width: 300px;
border: 3px solid #0DA9D0;
}
.modalPopup .header
{
background-color: #2FBDF1;
height: 30px;
color: White;
line-height: 30px;
text-align: center;
font-weight: bold;
}
.modalPopup .body
{
min-height: 50px;
line-height: 30px;
text-align: center;
padding: 5px;
}
.modalPopup .footer
{
padding: 3px;
}
.modalPopup .button
{
height: 23px;
color: White;
line-height: 23px;
text-align: center;
font-weight: bold;
cursor: pointer;
background-color: #9F9F9F;
border: 1px solid #5C5C5C;
}
.modalPopup td
{
text-align: left;
}
table
{
border: 1px solid #ccc;
}
table th
{
background-color: #F7F7F7;
color: #333;
font-weight: bold;
}
table th, table td
{
padding: 5px;
border-color: #ccc;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" ID="ScrMgr"></asp:ScriptManager>
<br />
<div style="padding-left: 20px !important;">
<asp:ListView ID="lvCustomers" runat="server" GroupPlaceholderID="groupPlaceHolder1"
ItemPlaceholderID="itemPlaceHolder1">
<LayoutTemplate>
<table cellpadding="0" cellspacing="0">
<tr>
<th>
CustomerId
</th>
<th>
ContactName
</th>
<th>
Country
</th>
<th>
Images
</th>
</tr>
<asp:PlaceHolder runat="server" ID="groupPlaceHolder1"></asp:PlaceHolder>
</table>
</LayoutTemplate>
<GroupTemplate>
<tr>
<asp:PlaceHolder runat="server" ID="itemPlaceHolder1"></asp:PlaceHolder>
</tr>
</GroupTemplate>
<ItemTemplate>
<td>
<asp:Label ID="lblId" Text='<%# Eval("ID") %>' runat="server" />
</td>
<td>
<asp:Label ID="lblName" Text='<%# Eval("Name") %>' runat="server" />
</td>
<td>
<asp:Label ID="lblCountry" Text='<%# Eval("Country") %>' runat="server" />
</td>
<td>
<asp:ImageButton ID="imgShow" Width="50px" Height="50px" ImageUrl='<%# Eval("ImageUrl") %>'
runat="server" OnClick="ShowModal" />
</td>
</ItemTemplate>
</asp:ListView>
</div>
<asp:ImageButton ID="lnkFake" runat="server" Style="display: none" />
<asp:ModalPopupExtender ID="mpe" runat="server" PopupControlID="pnlPopup" TargetControlID="lnkFake"
CancelControlID="btnClose" BackgroundCssClass="modalBackground">
</asp:ModalPopupExtender>
<asp:Panel ID="pnlPopup" runat="server" CssClass="modalPopup" Style="display: none">
<div class="header">
Details
</div>
<div class="body">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width: 60px">
<b>Id: </b>
</td>
<td>
<asp:Label ID="lblId" runat="server" />
</td>
</tr>
<tr>
<td>
<b>Name: </b>
</td>
<td>
<asp:Label ID="lblName" runat="server" />
</td>
</tr>
<tr>
<td>
<b>Country: </b>
</td>
<td>
<asp:Label ID="lblCountry" runat="server" />
</td>
</tr>
<tr>
<td>
<b>Image: </b>
</td>
<td>
<asp:Image ID="imgUrl" ImageUrl="" runat="server" />
</td>
</tr>
</table>
</div>
<div class="footer" align="right">
<asp:Button ID="btnClose" runat="server" Text="Close" CssClass="button" />
</div>
</asp:Panel>
</form>
</body>
</html>
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[] { new DataColumn("Id"), new DataColumn("Name"), new DataColumn("Country"), new DataColumn("ImageUrl") });
dt.Rows.Add(1, "John Hammond", "United States", "~/images80/00171919.jpg");
dt.Rows.Add(2, "Luke", "Ireland", "~/images80/00171919.jpg");
dt.Rows.Add(3, "Suzanne Mathews", "France", "~/images80/00171919.jpg");
dt.Rows.Add(4, "Robert Schidner", "Russia", "~/images80/00171919.jpg");
dt.Rows.Add(5, "Lokesh", "Japan", "~/images80/00171919.jpg");
lvCustomers.DataSource = dt;
lvCustomers.DataBind();
}
}
protected void ShowModal(object sender, EventArgs e)
{
ListViewItem item = (sender as ImageButton).NamingContainer as ListViewItem;
lblId.Text = (item.FindControl("lblId") as Label).Text;
lblName.Text = (item.FindControl("lblName") as Label).Text;
lblCountry.Text = (item.FindControl("lblCountry") as Label).Text;
imgUrl.ImageUrl = (sender as ImageButton).ImageUrl;
mpe.Show();
}