Popup model ASP.NET C# With Bootstrap class with ajaxToolkit ModalPopupExtender

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

    <asp:UpdatePanel ID="upPopUps" runat="server" UpdateMode="Conditional">

        <ContentTemplate>

   

    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" AutoGenerateEditButton="True" OnRowCancelingEdit="GridView1_RowCancelingEdit" OnRowEditing="GridView1_RowEditing" OnRowUpdating="GridView1_RowUpdating" DataKeyNames="ID,MainID" OnRowDataBound="GridView1_RowDataBound" CssClass="table table-hover table-bordered table-responsive" AllowPaging="True" OnPageIndexChanging="GridView1_PageIndexChanging" PageSize="20" FirstPageText="First" PreviousPageText="Previous" NextPageText="Next" LastPageText="Last" AllowSorting="True" OnRowDeleting="GridView1_RowDeleting" OnInit="GridView1_Init" OnRowCommand="GridView1_RowCommand" OnSelectedIndexChanged="OnSelectedIndexChanged">

      

    </asp:GridView>

<asp:panel runat="server" ID="pnlAddEdit"  CssClass="modal-fade" style="height: 80vh;overflow-y: auto;" BorderStyle="Double" Font-Size="Small">

            <div class="modal-dialog" style="overflow-y: initial !important">

                <div class="modal-content">

                    

  <div class="modal-header"><button  class="close" data-dismiss="modal" aria-label="Close" >

      <span aria-hidden="true">&times;</span>

                            </button>

      <h3 class="modal-title">Edit Employee</h3></div>

    <div class="modal-body" >

    <div class="text-center h3">

        <asp:Label runat="server" ID="ltrStatus" CssClass="text-danger"></asp:Label>

    </div>

----------------

   </div>

    <div class="modal-footer">

    <div class="col-md-12 text-center">

        <br />

        

        <asp:Button runat="server" ID="btnPnlUpdate" Text="Update"  CssClass="btn btn-success" OnClick="btnPnlUpdate_Click" ValidationGroup="add" />

        <asp:Button runat="server" ID="btnPnlDelete" Text="Delete" CssClass="btn btn-success" OnClick="btnDelete_Click" OnClientClick="return confirm('Are you sure to delete this record ?');" />

        <asp:Button runat="server" ID="btnPnlClose" Text="Close" CssClass="btn btn-danger"  ValidationGroup="reset"  />

    </div>

    

        </div>

                    </div>

    <//div>

  </asp:panel>          

            <asp:LinkButton ID="lnkFake" Text="dfdf" runat="server"></asp:LinkButton>

            

            <ajaxToolkit:ModalPopupExtender ID="popup" BehaviorID="popup" runat="server" DropShadow="false"

PopupControlID="pnlAddEdit" TargetControlID = "lnkFake" BackgroundCssClass="modalBackground" CancelControlID="btnPnlClose" >

</ajaxToolkit:ModalPopupExtender>

            </ContentTemplate>

<Triggers>

<asp:AsyncPostBackTrigger ControlID = "GridView1" />

<asp:AsyncPostBackTrigger ControlID = "btnPnlUpdate" />

</Triggers>

            

        

        </asp:UpdatePanel>

</asp:Content>

In aspx.cs page

protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)

        {

        

            if (e.CommandName == "Modify")

            {

               Int64 id = Convert.ToInt64(e.CommandArgument);

                popup.Show();

                //pnlAddEdit.Visible = true;

               // ScriptManager.RegisterStartupScript(this, this.GetType(), "message", "alert('Error Occured" + id + "')", true);

            }

        }

Note:- Do not use grid inside update panel because jquery datepicker will not work 

reference:- https://www.aspsnippets.com/Articles/Building-Modal-Popup-using-ASPNet-AJAX-ModalPopupExtender-Control.aspx

https://www.aspsnippets.com/questions/130093/add-bootstrap-model-popup-opening-and-closing-effects-on-ajax-modelpopup-extender/