How to use modal popup inside the gridview

Here is some code sample on how to use the modal-up inside gridview, here is sample screenshot of my project.

Gridview with Join button that will trigger the modal popup.

Modal popup confirmation after clicking the Join button

The trick to do this is just to add a hidden button to be used as the TargetControlID as you code see in aspx code below:

<asp:Button id="btnShowPopup" runat="server" style="display:none" />

<asp:ModalPopupExtender ID="JoinModal" runat="server" PopupControlID="pnlJoin"

TargetControlID="btnShowPopup" BackgroundCssClass="modalBackground"                                            CancelControlID="bnCancel">

asp:ModalPopupExtender>

Modal popup code:

Gridview code

And from the code behind all you need is to call the ".Show()" method of the modal popup extender.

protected void grdResult_RowCommand(object sender, GridViewCommandEventArgs e)
        {
            if (e.CommandName == "Join")
            {
                    this.updJoin.Update();// use this if you need to update something inside the modal panel
                    JoinModal.Show();
            }
           
        }