Please help iam trying to use a modal popup but it not popuping up instead its shows at the boot of the page please help
HTML
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="StudentData.aspx.vb" Inherits="SLISWEB2023.StudentData" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<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="admno">
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("account") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="admno" runat="server" Text='<%# Bind("account") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name">
<EditItemTemplate>
<asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("Name") %>'></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="Fname" runat="server" Text='<%# Bind("Name") %>' Width="216px"></asp:TextBox>
</FooterTemplate>
<ItemTemplate>
<asp:Label ID="Name" runat="server" Text='<%# Bind("Name") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Class">
<EditItemTemplate>
<asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("Class") %>'></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:DropDownList ID="ClassdllF" runat="server">
<asp:ListItem>NONE</asp:ListItem>
<asp:ListItem>S1</asp:ListItem>
<asp:ListItem>S2</asp:ListItem>
<asp:ListItem>S3</asp:ListItem>
<asp:ListItem>S4</asp:ListItem>
<asp:ListItem>S5</asp:ListItem>
<asp:ListItem>S6</asp:ListItem>
</asp:DropDownList>
</FooterTemplate>
<ItemTemplate>
<asp:Label ID="Class" runat="server" Text='<%# Bind("Class") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Stream">
<EditItemTemplate>
<asp:TextBox ID="TextBox4" runat="server" Text='<%# Bind("Stream") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Stream" runat="server" Text='<%# Bind("Stream") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Sex">
<EditItemTemplate>
<asp:TextBox ID="TextBox8" runat="server" Text='<%# Bind("Sex") %>'></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:DropDownList ID="DropDownList2" runat="server">
<asp:ListItem>NONE</asp:ListItem>
<asp:ListItem>MALE</asp:ListItem>
<asp:ListItem>FEMALE</asp:ListItem>
</asp:DropDownList>
</FooterTemplate>
<ItemTemplate>
<asp:Label ID="Sex" runat="server" Text='<%# Bind("Sex") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Program">
<EditItemTemplate>
<asp:TextBox ID="TextBox6" runat="server" Text='<%# Bind("Program") %>'></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("Program") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="House">
<EditItemTemplate>
<asp:TextBox ID="TextBox7" runat="server" Text='<%# Bind("House") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="House" runat="server" Text='<%# Bind("House") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Status">
<EditItemTemplate>
<asp:TextBox ID="TextBox5" runat="server" Text='<%# Bind("Status") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Rclass" runat="server" Text='<%# Bind("Status") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField Visible="False">
<ItemTemplate>
<asp:LinkButton ID="lnkEdit" href="#" data-target="#MyPopup" data-toggle="modal"
runat="server">Edit</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Edit">
<ItemTemplate>
<asp:LinkButton ID="lnkBtnEdit" runat="server" Text="Edit" 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">
×</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" DataSourceID="SqlDataSource2" DataTextField="stream"
DataValueField="stream" CssClass="dropdown" AutoPostBack="true">
</asp:DropDownList>
<asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:SLISConnectionString %>"
SelectCommand="SELECT stream FROM streamdata GROUP BY stream"></asp:SqlDataSource>
</td>
</tr>
<tr>
<td>Status</td>
<td>
<asp:TextBox runat="server" ID="Status" CssClass="form-control" />
</td>
</tr>
<tr>
<td>Regno</td>
<td>
<asp:TextBox runat="server" ID="Regno" CssClass="form-control" />
</td>
</tr>
<tr>
<td>BookLimit</td>
<td>
<asp:TextBox runat="server" ID="BookLimit" CssClass="form-control" />
</td>
</tr>
<tr>
<td>Email</td>
<td>
<asp:TextBox runat="server" ID="Email" CssClass="form-control" />
</td>
</tr>
<tr>
<td>Mobile</td>
<td>
<asp:TextBox runat="server" ID="Mobile" CssClass="form-control" />
</td>
</tr>
<td>Village</td>
<td>
<asp:TextBox runat="server" ID="Village" CssClass="form-control" />
</td>
<td>Yearob</td>
<td>
<asp:TextBox runat="server" ID="Yearob" 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>Program</td>
<td>
<asp:DropDownList ID="DropDownList1" runat="server" CssClass="form-control" Height="30px"
Width="125px" AutoPostBack="true">
<asp:ListItem>NONE</asp:ListItem>
<asp:ListItem>D</asp:ListItem>
<asp:ListItem>B</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>KIZITO</asp:ListItem>
<asp:ListItem>THEREZA</asp:ListItem>
<asp:ListItem>SAVIO</asp:ListItem>
<asp:ListItem>AGNES</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
</asp:Panel>
<tr>
<td>
<asp:TextBox runat="server" ID="Sexd" CssClass="form-control" Visible="false" />
</td>
<td>
<asp:TextBox runat="server" ID="Username" 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" />
<asp:Button ID="Button2" Text="Close" runat="server" CssClass="btn btn-primary" OnClick="Displayclose" />
</div>
</div>
</div>
</div>
<script type="text/javascript" src="../Scripts/jqueryb 1.8.3.min.js"></script>
<script type="text/javascript" src="../Scripts/Jquery.datatables.min.js"></script>
<script type="text/javascript" src="../Scripts/datatable.fixedColumns.min.js"></script>
<link href="../Scripts/Jquery.datatables.min.css" rel="stylesheet" type="text/css" />
<link href="../Scripts/fixedColumns.dataTables.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$('#GridView1 tfoot tr').appendTo('#GridView1 thead');
$('#GridView1').removeAttr('width').DataTable({
bLengthChange: true,
lengthMenu: [[5, 10, -1], [5, 10, "All"]],
bFilter: true,
bSort: true,
scrollCollapse: true,
paging: true,
fixedColumns: false,
orderCellsTop: true
});
});
</script>
<script type='text/javascript'>
function hideModal() {
$("#MyPopup").removeClass("in");
$(".modal-backdrop").remove();
$("#MyPopup").hide();
}
</script>
<script type='text/javascript'>
function openModal() {
$('[id*=MyPopup]').modal('show');
}
</script>
</div>
</form>
</body>
</html>
Code
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Dim constr As String = ConfigurationManager.ConnectionStrings("SLISConnectionString").ConnectionString
Using con As New SqlConnection(constr)
Using cmd As New SqlCommand("SELECT*FROM Accounts where name is not null", con)
Using sda As New SqlDataAdapter(cmd)
cmd.CommandType = CommandType.Text
Dim dt As New DataTable()
sda.Fill(dt)
GridView1.DataSource = dt
GridView1.DataBind()
GridView1.UseAccessibleHeader = True
GridView1.HeaderRow.TableSection = TableRowSection.TableHeader
End Using
End Using
End Using
ClientScript.RegisterStartupScript(Me.[GetType](), "MyPopup", "hideModal();", True)
' [Date].Text = Convert.ToDateTime(DateAndTime.Now).ToString("dd/MM/yyyy")
' TDate.Text = DateTime.Now.ToString("dd/MM/yyyy hh:mm:ss tt")
' Dim name As String = Streamddl.SelectedItem.Text
End If
End Sub
