Ref:
<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</cc1:ToolkitScriptManager>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" HeaderStyle-BackColor="#3AC0F2"
HeaderStyle-ForeColor="White">
<Columns>
<asp:BoundField DataField="Id" HeaderText="Id" ItemStyle-Width="30" />
<asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150" />
<asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="150" />
<asp:TemplateField>
<ItemTemplate>
<asp:HyperLink ID="lnkShow" NavigateUrl="#" Text="Show" runat="server" onClick="ShowRowDetail();" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:LinkButton ID="lnkDummy" Text="" runat="server" />
<cc1:ModalPopupExtender ID="ModalPopupExtender1" BehaviorID="mpe" runat="server"
PopupControlID="pnlPopup" TargetControlID="lnkDummy" CancelControlID="lnkHide"
BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>
<asp:Panel ID="pnlPopup" runat="server" CssClass="modalPopup" Style="display: none">
<div class="header">
Modal Popup
</div>
<div class="body">
This is a Modal Popup.
<br />
<asp:HyperLink ID="lnkHide" NavigateUrl="#" Text="Hide" runat="server" />
</div>
</asp:Panel>
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id", typeof(int)),
new DataColumn("Name", typeof(string)),
new DataColumn("Country",typeof(string)) });
dt.Rows.Add(1, "John Hammond", "United States");
dt.Rows.Add(2, "Mudassar Khan", "India");
dt.Rows.Add(3, "Suzanne Mathews", "France");
dt.Rows.Add(4, "Robert Schidner", "Russia");
GridView1.DataSource = dt;
GridView1.DataBind();
}
}
Script
<script type="text/javascript">
function ShowRowDetail() {
$find("mpe").show();
}
</script>
Style
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
.modalBackground
{
background-color: Black;
filter: alpha(opacity=60);
opacity: 0.6;
}
.modalPopup
{
background-color: #FFFFFF;
width: 300px;
border: 3px solid #0DA9D0;
padding: 0;
}
.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;
font-weight: bold;
}
</style>