[Solved] Bootstrap Modal popup Buttons are not hiding in ASP.Net

Hi makumbi,

Please refer below sample code.

Database

For this example I have used of Northwind database that you can download using the link given below.

Download Northwind Database

HTML

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <style type="text/css">
        body { font-family: Arial; font-size: 10pt; }
    </style>
    <div>
    </div>
    <div class="container">
        <div class="table-responsive">
            <asp:GridView ID="GridView1" AutoGenerateColumns="False" runat="server" CssClass="table table-bordered table-hover table-striped thead-dark GridCustomers"
                ShowFooter="True" Height="246px">
                <Columns>
                    <asp:TemplateField HeaderText="Customer ID">
                        <EditItemTemplate>
                            <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("CustomerID") %>'></asp:TextBox>
                        </EditItemTemplate>
                        <ItemTemplate>
                            <asp:Label ID="admno" runat="server" Text='<%# Bind("CustomerID") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Company Name">
                        <EditItemTemplate>
                            <asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("CompanyName") %>'></asp:TextBox>
                        </EditItemTemplate>
                        <FooterTemplate>
                            <asp:TextBox ID="Fname" runat="server" Text='<%# Bind("CompanyName") %>' Width="216px"></asp:TextBox>
                        </FooterTemplate>
                        <ItemTemplate>
                            <asp:Label ID="Name" runat="server" Text='<%# Bind("CompanyName") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Contact Name">
                        <EditItemTemplate>
                            <asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("ContactName") %>'></asp:TextBox>
                        </EditItemTemplate>
                        <FooterTemplate>
                            <asp:DropDownList ID="ClassdllF" runat="server">
                                <asp:ListItem>NONE</asp:ListItem>
                                <asp:ListItem>P1</asp:ListItem>
                                <asp:ListItem>P2</asp:ListItem>
                                <asp:ListItem>P3</asp:ListItem>
                                <asp:ListItem>P4</asp:ListItem>
                                <asp:ListItem>P5</asp:ListItem>
                                <asp:ListItem>P6</asp:ListItem>
                                <asp:ListItem>P7</asp:ListItem>
                                <asp:ListItem>PRE</asp:ListItem>
                            </asp:DropDownList>
                        </FooterTemplate>
                        <ItemTemplate>
                            <asp:Label ID="Class" runat="server" Text='<%# Bind("ContactName") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Contact Title">
                        <EditItemTemplate>
                            <asp:TextBox ID="TextBox4" runat="server" Text='<%# Bind("ContactTitle") %>'></asp:TextBox>
                        </EditItemTemplate>
                        <ItemTemplate>
                            <asp:Label ID="Stream" runat="server" Text='<%# Bind("ContactTitle") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="City">
                        <EditItemTemplate>
                            <asp:TextBox ID="TextBox8" runat="server" Text='<%# Bind("City") %>'></asp:TextBox>
                        </EditItemTemplate>
                        <FooterTemplate>
                            <asp:DropDownList ID="DropDownList2" runat="server">
                                <asp:ListItem>NONE</asp:ListItem>
                                <asp:ListItem>UAE</asp:ListItem>
                                <asp:ListItem>USA</asp:ListItem>
                                <asp:ListItem>Berlin</asp:ListItem>
                                <asp:ListItem>Russia</asp:ListItem>
                            </asp:DropDownList>
                        </FooterTemplate>
                        <ItemTemplate>
                            <asp:Label ID="Sex" runat="server" Text='<%# Bind("City") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Address">
                        <EditItemTemplate>
                            <asp:TextBox ID="TextBox6" runat="server" Text='<%# Bind("Address") %>'></asp:TextBox>
                        </EditItemTemplate>
                        <FooterTemplate>
                            <asp:Button ID="Button1" runat="server" Text="AddNew" CssClass="btn btn-primary"
                                Height="25px" OnClick="Button1_Click" />
                        </FooterTemplate>
                        <ItemTemplate>
                            <asp:Label ID="Stdype" runat="server" Text='<%# Bind("Address") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="PostalCode">
                        <EditItemTemplate>
                            <asp:TextBox ID="TextBox7" runat="server" Text='<%# Bind("PostalCode") %>'></asp:TextBox>
                        </EditItemTemplate>
                        <ItemTemplate>
                            <asp:Label ID="House" runat="server" Text='<%# Bind("PostalCode") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Country">
                        <EditItemTemplate>
                            <asp:TextBox ID="TextBox5" runat="server" Text='<%# Bind("Country") %>'></asp:TextBox>
                        </EditItemTemplate>
                        <ItemTemplate>
                            <asp:Label ID="Rclass" runat="server" Text='<%# Bind("Country") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField>
                        <ItemTemplate>
                            <asp:LinkButton ID="lnkEdit" href="#" data-target="#MyPopup" data-toggle="modal"
                                runat="server">Edit</asp:LinkButton>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Pay">
                        <ItemTemplate>
                            <asp:LinkButton ID="lnkBtnEdit" runat="server" Text="Pay Now" CssClass="btn btn-info"
                                OnClick="Display"></asp:LinkButton>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
        </div>
    </div>
    <div id="MyPopup" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        &times;</button>
                    <h4 class="modal-title">
                        Update Payments
                    </h4>
                </div>
                <div class="modal-body">
                    <table class="table table-bordered table-hover table-striped thead-dark">
                        <tr>
                            <td>
                                admno
                            </td>
                            <td>
                                <asp:TextBox runat="server" ID="admno" CssClass="form-control" />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Name
                            </td>
                            <td>
                                <asp:TextBox runat="server" ID="txtName" CssClass="form-control" />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Class
                            </td>
                            <td>
                                <asp:TextBox runat="server" ID="txtCountry" CssClass="form-control" />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Stream
                            </td>
                            <td>
                                <asp:DropDownList ID="Streamddl" runat="server" DataTextField="stream" DataValueField="stream"
                                    CssClass="dropdown" AutoPostBack="true" OnSelectedIndexChanged="OnUpdate2000">
                                    <asp:ListItem Text="USA" Value="1"></asp:ListItem>
                                    <asp:ListItem Text="UK" Value="2"></asp:ListItem>
                                    <asp:ListItem Text="LONDON" Value="3"></asp:ListItem>
                                    <asp:ListItem Text="PARIS" Value="4"></asp:ListItem>
                                </asp:DropDownList>
                                <%--<asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:UNIFORMConnectionString %>"
                                    SelectCommand="SELECT stream FROM streamdata GROUP BY stream"></asp:SqlDataSource>--%>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Pay Date
                            </td>
                            <td>
                                <asp:TextBox runat="server" ID="TDate" CssClass="form-control" />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Amount
                            </td>
                            <td>
                                <asp:TextBox runat="server" ID="Pay" CssClass="form-control" />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Reciept No/ Bank Slip No
                            </td>
                            <td>
                                <asp:TextBox runat="server" ID="Reciept" CssClass="form-control" />
                            </td>
                        </tr>
                        <td>
                            Details
                        </td>
                        <td>
                            <asp:TextBox runat="server" ID="Comment" CssClass="form-control" />
                        </td>
                        <tr>
                            <td>
                                Sex
                            </td>
                            <td>
                                <asp:DropDownList ID="Sexdll" runat="server" CssClass="form-control" Height="30px"
                                    Width="125px">
                                    <asp:ListItem>NONE</asp:ListItem>
                                    <asp:ListItem>MALE</asp:ListItem>
                                    <asp:ListItem>FEMALE</asp:ListItem>
                                </asp:DropDownList>
                            </td>
                            <asp:Panel ID="Panel1" runat="server" Width="261px">
                                <tr>
                                    <td>
                                        Transaction Details
                                    </td>
                                    <td>
                                        <asp:DropDownList ID="DropDownList1" runat="server" CssClass="form-control" Height="30px"
                                            Width="125px" OnSelectedIndexChanged="Colourdll2000" AutoPostBack="true">
                                            <asp:ListItem>NONE</asp:ListItem>
                                            <asp:ListItem>CASH</asp:ListItem>
                                            <asp:ListItem>TROPICAL</asp:ListItem>
                                            <asp:ListItem>DFCU BANK</asp:ListItem>
                                        </asp:DropDownList>
                                    </td>
                                    <td>
                                        House
                                    </td>
                                    <td>
                                        <asp:DropDownList ID="Colourdll" runat="server" CssClass="form-control">
                                            <asp:ListItem>NONE</asp:ListItem>
                                            <asp:ListItem>Red</asp:ListItem>
                                            <asp:ListItem>Green</asp:ListItem>
                                            <asp:ListItem>Blue</asp:ListItem>
                                            <asp:ListItem>Yellow</asp:ListItem>
                                        </asp:DropDownList>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2">
                                        &nbsp;
                                    </td>
                                </tr>
                            </asp:Panel>
                            <tr>
                                <td>
                                    <asp:TextBox runat="server" ID="Sexd" CssClass="form-control" Visible="false" />
                                </td>
                                <td>
                                    <asp:TextBox runat="server" ID="Rclassd" CssClass="form-control" Visible="false" />
                                </td>
                                <td>
                                    <asp:TextBox runat="server" ID="Stdype" CssClass="form-control" Visible="false" />
                                </td>
                            </tr>
                    </table>
                </div>
                <div class="modal-footer">
                    <asp:Button ID="btnUpdate" Text="Update" runat="server" CssClass="btn btn-primary "
                        OnClick="OnUpdate" />
                    <input type="button" value="Close" class="btn btn-danger" data-dismiss="modal" />
                </div>
            </div>
        </div>
    </div>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
    <link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css" rel="stylesheet"
        type="text/css" />
    <link rel="stylesheet" href="../BootStrap/Css/BootStrap3.3.2.css" />
    <script type="text/javascript" src="../BootStrap/Jquery3.4.1.js"></script>
    <script type="text/javascript" src="../BootStrap/Bootstrap3.3.2.min.js"></script>
    <script type="text/javascript" src="../BootStrap/Jquery.Datatables.1.10.20.js"></script>
    <link href="../BootStrap/Css/1.10.20.jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="../Scripts/inputmask.min.js"></script>
    <script type="text/javascript" src="../Scripts/inputmask.date.extensions.min.js"></script>
    <script type="text/javascript" src="../Scripts/inputmask.extensions.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../Scripts/inputmask.css" />
    <script type="text/javascript">
        $(function () {
            var inputmask = new Inputmask("99/99/9999", { placeholder: 'dd/mm/yyyy' });
            inputmask.mask($('[id*=TDate]'));

            $(".GridCustomers").DataTable({
                bLengthChange: true,
                lengthMenu: [[10, 15, -1], [10, 15, "All"]],
                bFilter: true,
                bSort: true,
                bPaginate: true
            });

            $("[id*=lnkEdit]").click(function () {
                $('[id*=admno]').val($(this).closest('tr').find('td').eq(0).html());
                $('[id*=txtName]').val($(this).closest('tr').find('td').eq(1).html());
                $('[id*=txtCountry]').val($(this).closest('tr').find('td').eq(2).html());
                $('[id*=Streamddl]').val($(this).closest('tr').find('td').eq(3).html());
                $('#MyPopup').modal('show');
                return false;
            });
        });
    </script>
    <script type='text/javascript'>
        function openModal() {
            $('[id*=MyPopup]').modal('show');
        }  
    </script>
</asp:Content>

Code

protected void Page_Load(object sender, EventArgs e)
{
    DataTable dt = new DataTable();
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    string query = "SELECT TOP 3 * FROM Customers";
    using(SqlConnection con = new SqlConnection(constr))
    {
        using (SqlDataAdapter sda = new SqlDataAdapter(query,con))
        {
            sda.Fill(dt);
            GridView1.DataSource = dt;
            GridView1.DataBind();
        }
    }
}

Screenshot