AjaxModalPopup don't show on visual studio 2013

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.