AjaxModalPopup don't show on visual studio 2013 - asp.net

Question

I'm working on simple asp.net project with master page and content page. On the content page I have a ImageButton inside a gridview. I'm trying to show a modal popup when I click Image button, but it does not appear.
This is the necessary code:
<asp:Button ID="showPopUp" runat="server" Text="Button" Visible="False" />
<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" style="display:none">
<table class="nav-justified">
<tr>
<td colspan="3" style="background-color: #CCCC00; color: #FFFFFF;" title="Purchase Invoice Details"></td>
</tr>
<tr>
<td class="auto-style5">Invoice</td>
<td class="auto-style6">:</td>
<td class="auto-style13">
<asp:Label ID="lblInvoice" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td class="auto-style12">Name</td>
<td class="auto-style8">:</td>
<td class="auto-style14">
<asp:Label ID="lblName" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td class="auto-style12">Category</td>
<td class="auto-style8">:</td>
<td class="auto-style14">
<asp:Label ID="lblCategory" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td class="auto-style5">Total Qty</td>
<td class="auto-style6">:</td>
<td class="auto-style13">
<asp:Label ID="lblQuantity" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td class="auto-style12">Total Price</td>
<td class="auto-style8">:</td>
<td class="auto-style14">
<asp:Label ID="lblPrice" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td class="auto-style12">SalePrice/Item</td>
<td class="auto-style8">:</td>
<td class="auto-style14">
<asp:Label ID="lblSalePrice" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td class="auto-style12">Comments</td>
<td class="auto-style8">:</td>
<td class="auto-style14">
<asp:Label ID="lblComments" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td class="auto-style12">Date</td>
<td class="auto-style8">:</td>
<td class="auto-style14">
<asp:Label ID="lblDate" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td class="auto-style12"></td>
<td class="auto-style8"></td>
<td class="auto-style14"></td>
</tr>
<tr>
<td colspan="3" style="height: 20px">
<asp:Button ID="btnClose" CssClass="btn-info" runat="server" Text="Close" OnClick="btnClose_Click" />
</td>
</tr>
</table>
</asp:Panel>
<ajax:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
TargetControlID="showPopUp"
PopupControlID="Panel1"
CancelControlID="btnClose"
BackgroundCssClass="backgroundcss" >
</ajax:ModalPopupExtender>
<style type="text/css">
.backgroundcss{
background-color:gray;
filter:alpha(opacity=80);
opacity:0.8;
z-index:10000;
}
.modalPopup
{
background-color: #FFFFFF;
width: 300px;
border: 3px solid #0DA9D0;
padding: 0;
}
</style>
protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
{
ImageButton imgbtn = (ImageButton)sender;
GridViewRow gvr = (GridViewRow)imgbtn.NamingContainer;
lblInvoice.Text = gvr.Cells[1].Text;
lblName.Text = gvr.Cells[2].Text;
lblCategory.Text = gvr.Cells[3].Text;
lblQuantity.Text = gvr.Cells[4].Text;
lblPrice.Text = gvr.Cells[5].Text;
lblSalePrice.Text = gvr.Cells[6].Text;
lblComments.Text = gvr.Cells[7].Text;
lblDate.Text = gvr.Cells[8].Text;
this.ModalPopupExtender1.Show();
}

Answer 1

I was setting the targetcontrolid of the extender to a hidden button and trying to fire the Show() event in server side code. It wasn't being displayed even though the code was getting hit. I discovered that the problem was that I was hiding the hidden button using "visible = false" which doesn't render the control to the page. I changed it to "style='display:none'" and it started working. Try changing your target control to a hidden button and make sure it's getting rendered and maybe it will work.