I have a bootstrap popup displaying student results but it opens and closes immediately. my master page file has following included js files
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<script src="jquery-1.12.3.min.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
and my webpage has no file included for bootstrap only a jquery timer file
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<link href="css/jquery.countdownTimer.css" rel="stylesheet" type="text/css" />
</asp:Content>
The code for modal is as below
<div class="modal fade" id="myModalTest" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<%-- <button type="button" class="close" data-dismiss="modal">×</button>--%>
<h4 class="modal-title text-center">RESULT</h4>
</div>
<div class="modal-body">
<table class="table table-bordered" style="background-color:White" cellpadding="10" cellspacing="10">
<tr>
<td class="style1">
<p class="text-justify"><asp:Label runat="server" ID="Label1" Text="Test Name :"></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lbltest"></asp:Label>
</td>
</tr>
<tr>
<td class="style1">
<asp:Label runat="server" ID="lblName" Text="Student Name :"></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lbluname"></asp:Label>
</td>
</tr>
<tr>
<td class="style1">
<asp:Label runat="server" ID="lblmks" Text="Total marks scored :"></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lblmarksscored"></asp:Label>
</td>
</tr>
<tr>
<td class="style1">
<asp:Label runat="server" ID="Label2" Text="Total questions attempted :"></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lbltot"></asp:Label>
</td>
</tr>
<tr>
<td class="style1">
<asp:Label runat="server" ID="Label3" Text="Total questions in Test :"></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lbltotalTestQ"></asp:Label>
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<asp:Button class="btn btn-default" runat="server" ID="btnBackModal" Text="back" OnClick="btnBackModal_Click"/>
</div>
</div>
</div>
</div>
Even the back button's ie btnBackModal OnClick event does not fire. When I debugged the code the control does not go to that event on the server side.
public void btnBackModal_Click(object sender, EventArgs e)
{
if (isSaved == 0)
saveAnswer();
Response.Redirect("StudentHome.aspx");
}
I solved the problem by writing javascript function to open modal instead of using data-toggle attribute for button.
I removed the code
<button input="button" class="btn btn-info" id="btnshowmodal" data-toggle="modal" data-target="#myModalTest">View Result</button>
and instead wrote a javascript function to handle onclick event.
HTML:
<button input="button" class="btn btn-info" id="btnshowmodal" onclick="popup();return false;" runat="server">View Result</button>
JS:
function popup() {
$('[id*="myModalTest"]').modal('show');
}
Related
I have a gridview that has a template field which contains a link button. When the user clicks on this link button I am calling an OnClick event DisplayModal which runs a method to get the dynamic values to from the database to a datatable to bind to the modal gridview. This method runs ClientScript.RegisterStartupScript to call jquery function openModal() which shows the modal. This works fine.
I have three gridviews on the page. When i scroll down the second gridview and click on the link button the modal opens with the correct values on the modal but it refreshes the page so the scrollbar is back at the top rather than where i clicked on the gridview and then opens the modal.
I want to prevent it from refreshing the page. I have got an update panel around the gridview and PostBackTrigger tag after the modal.
protected void DisplayModal(object sender, EventArgs e)
{
int rowIndex = Convert.ToInt32(((sender as LinkButton).NamingContainer as GridViewRow).RowIndex);
GridViewRow row = gvTeamCAOTDashboard.Rows[rowIndex];
row.Focus();
MeasurecodeClicked = (row.FindControl("lnkBtnEdit") as LinkButton).Text;
GetKPICriteria(MeasurecodeClicked); //calls sql method to bind data
H1.InnerText = "KPI Criteria - " + MeasurecodeClicked;
ClientScript.RegisterStartupScript(this.GetType(), "Pop", "openModal();", true);
}
function openModal() {
$("#myModal").modal('show');
}
<div class="table-responsive">
<asp:updatepanel id="Updatepanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="gvTeamCAOTDashboard" class="table table-bordered" Width="100%" DataKeyNames="ControlDesc" runat="server" CellPadding="0" AutoGenerateColumns="false" OnRowDataBound="gvTeamCAOTDashboard_RowDataBound" HeaderStyle-HorizontalAlign="Center">
<Columns>
<asp:BoundField DataField="IsWorkingDay" HeaderText="IsWorkingDay" ReadOnly="true" SortExpression="IsWorkingDay" ItemStyle-CssClass="Hide" HeaderStyle-CssClass="Hide" >
<ItemStyle CssClass="Hide" />
</asp:BoundField>
<asp:TemplateField HeaderText="" ItemStyle-HorizontalAlign ="Center" >
<ItemTemplate>
<asp:LinkButton ID="lnkBtnEdit" ForeColor="Black" runat="server" Text='<%# Eval("MeasureCode") %>'
OnClick="DisplayModal" ></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Total" SortExpression="TotalCases" ItemStyle-HorizontalAlign ="Center" ControlStyle-ForeColor="Black">
<ItemTemplate>
<asp:HyperLink ID="TotalCases" runat="server" Text='<%# Eval("TotalCases") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Target" HeaderText="Standard" ReadOnly="true" SortExpression="Target" ItemStyle-HorizontalAlign ="Center" >
<HeaderStyle />
</asp:BoundField>
<asp:BoundField DataField="AvgDaysTaken" HeaderText="Average" ReadOnly="true" SortExpression="AvgDaysTaken" ItemStyle-HorizontalAlign ="Center" >
<HeaderStyle />
</asp:BoundField>
</Columns>
</asp:GridView>
<!-- Modal -->
<div class="modal fade bd-example-modal-lg" id="myModalTeam" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" runat="server" id="H1"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<asp:GridView ID="gvModalTeam" runat="server">
</asp:GridView>
</div>
<div class="modal-footer">
<button type="button" id="closebutton" runat="server" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</ContentTemplate>
<Triggers >
<asp:PostBackTrigger ControlID="gvTeamCAOTDashboard" />
</Triggers>
</asp:updatepanel>
</div>
if you inspect the generated html in your browser you can find an tag with the id of lnkBtnEdit and attribute of "href="#". As it is discussed here you can find similar issue.
try to add href="#/" to the linkbutton
I have a button on page to open a modal:
<button data-toggle="modal" data-target="#connProductsModal" type="button" class="btn btn-brand"><%= GetGlobalResourceObject("ButtonText", "BTN_EDIT_PRODUCTS") %></button>
this opens following modal:
<div class="modal fade" id="connProductsModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Details</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<asp:UpdatePanel runat="server" ID="udpEditConnProd">
<ContentTemplate>
<telerik:RadGrid ID="gvEditConnectedProducts" runat="server" AllowMultiRowSelection="True" RenderMode="Lightweight" Skin="Material" PageSize="25" BorderWidth="0" AutoGenerateColumns="False" AllowPaging="True" AllowSorting="False">
<GroupingSettings CollapseAllTooltip="Collapse all groups"></GroupingSettings>
<ClientSettings AllowColumnsReorder="True" ReorderColumnsOnClient="True" EnableRowHoverStyle="True">
</ClientSettings>
<MasterTableView DataKeyNames="ProductId">
<Columns>
<telerik:GridTemplateColumn UniqueName="CheckBoxTemplateColumn">
<HeaderStyle CssClass="myGridHeader" />
<ItemTemplate>
<label class="k-checkbox k-checkbox--brand">
<asp:CheckBox runat="server" ID="cbSelectedItem" AutoPostBack="True" OnCheckedChanged="ToggleRowSelection" />
<span></span>
</label>
</ItemTemplate>
<HeaderTemplate>
<label class="k-checkbox k-checkbox--brand">
<asp:CheckBox runat="server" ID="headerCheckbox" AutoPostBack="True" OnCheckedChanged="ToggleSelectedState" />
<span></span>
</label>
</HeaderTemplate>
<ItemStyle Width="25px" />
</telerik:GridTemplateColumn>
<telerik:GridBoundColumn DataField="ProductCode" HeaderText="<%$ resources: PRODUCT_GRID_CODE %>" UniqueName="Address" Visible="True">
<HeaderStyle CssClass="myGridHeader" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="ProductName" HeaderText="<%$ resources: PRODUCT_GRID_NAME %>" UniqueName="first_name" Visible="True">
<HeaderStyle CssClass="myGridHeader" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="ProductNumber" HeaderText="<%$ resources: PRODUCT_GRID_NUMBER %>" UniqueName="Address" Visible="True">
<HeaderStyle CssClass="myGridHeader" />
</telerik:GridBoundColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<asp:LinkButton runat="server" ID="btnAddSelectedProducts" OnClick="btnAddSelectedProducts_OnClick" class="btn btn-brand"><%= GetGlobalResourceObject("ButtonText", "BTN_UPDATE") %></asp:LinkButton>
</div>
</div>
</div>
</div>
when I press "Save" in modal it should update a grind inside a update panel with conditional update mode. The trigger is the save button in the modal.
This works...but the modal will not close after the method is done.. I use this in code behind to "hide" the modal, witch works..
ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "$('#connProductsModal').modal('hide');", true);
but then the page (all java-script functions) freezes :/ If I skip the "hide" function everything works as it should but the modal does not close.
Any idea?
Am working on my final year project i need to have grid-view with model popup but whenever i click add button is not working. can anybody help me, i tried so many times and nothing is working stuck for 5 hrs.below is my html and back end code.Thanks. Nothing shows up when i click the button.
i really appreciate your help.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<!----Required Head met tags ---->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!----The Title ---->
<link rel="shortcut icon" href="img/favicon.ico" />
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div style="width: 90%; margin-right: 5%; margin-left: 5%; text-align: center">
<asp:ScriptManager runat="server" ID="ScriptManager1" />
<h3 style="text-align: center;">Manage Users </h3>
<!-- Placing GridView in UpdatePanel-->
<asp:UpdatePanel ID="upCrudGrid" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" Width="940px" HorizontalAlign="Center"
OnRowCommand="GridView1_RowCommand" AutoGenerateColumns="false" AllowPaging="true"
DataKeyNames="Id" CssClass="table table-hover table-striped">
<Columns>
<asp:ButtonField CommandName="detail" ControlStyle-CssClass="btn btn-info"
ButtonType="Button" Text="Detail" HeaderText="Detailed View">
<ControlStyle CssClass="btn btn-info"></ControlStyle>
</asp:ButtonField>
<asp:ButtonField CommandName="editRecord" ControlStyle-CssClass="btn btn-info"
ButtonType="Button" Text="Edit" HeaderText="Edit Record">
<ControlStyle CssClass="btn btn-info"></ControlStyle>
</asp:ButtonField>
<asp:ButtonField CommandName="deleteRecord" ControlStyle-CssClass="btn btn-info"
ButtonType="Button" Text="Delete" HeaderText="Delete Record">
<ControlStyle CssClass="btn btn-info"></ControlStyle>
</asp:ButtonField>
<asp:BoundField DataField="Username" HeaderText="Username" />
<asp:BoundField DataField="Password" HeaderText="Password" />
<asp:BoundField DataField="Email" HeaderText="Email" />
<asp:BoundField DataField="Address" HeaderText="Address" />
<asp:BoundField DataField="UserType" HeaderText="UserType" />
</Columns>
</asp:GridView>
<asp:Button ID="btnAdd" runat="server" Text="Add New Record" CssClass="btn btn-info" OnClick="btnAdd_Click" />
</ContentTemplate>
<Triggers>
</Triggers>
</asp:UpdatePanel>
<div id="editModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h3 id="editModalLabel">Edit Record</h3>
</div>
<asp:UpdatePanel ID="upEdit" runat="server">
<ContentTemplate>
<div class="modal-body">
<table class="table">
<tr>
<td>Username :
<asp:Label ID="tbUsername" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td> Password :
<asp:TextBox ID="tbPassword" runat="server" Width="193px"></asp:TextBox>
</td>
</tr>
<tr>
<td>Email:
<asp:TextBox ID="tbEmail" runat="server" style="margin-left: 1px" Width="131px"></asp:TextBox>
</td>
</tr>
<tr>
<td>Address:
<asp:TextBox ID="tbAddress" runat="server" Width="148px"></asp:TextBox>
</td>
</tr>
<tr>
<td>UserType:
<asp:TextBox ID="tbUserType" runat="server" Width="150px"></asp:TextBox>
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<asp:Label ID="lblResult" Visible="false" runat="server"></asp:Label>
<asp:Button ID="btnSave" runat="server" Text="Update" CssClass="btn btn-info" OnClick="btnSave_Click" />
<button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="GridView1" EventName="RowCommand" />
<asp:AsyncPostBackTrigger ControlID="btnSave" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</div>
</div>
<footer>
<div class="container">
<p class="pull-right">Back to top</p>
<p>© 2018 E-Bus ticketing system · Home · Update Schedule · Manage Users · Upload Tickets</p>
</div>
</footer>
</form>
</body>
</html>
You may trigger via data-attribute i.e.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
// ...html
</div>
or using jQuery i.e.
$('#myModal').modal('show') //Open
More details
I'm using the Bootstrap modal to display details on button click window.
Now facing a problem whenever the page loading or refreshing the Model is also showing up. How can I prevent this from happening.?
<script type="text/javascript">
function showPopup() {
$('#myModal').modal('show');
}
</script>
ASP
<section class="content">
<div class="row">
<div class="col-lg-12" style="margin: 20px 0 20px;">
<div class="box">
<div class="box-header">
<h3 class="box-title">Orders</h3>
</div>
<!-- /.box-header -->
<div class="box-body table-responsive ">
<asp:ListView ID="lvCustomers" runat="server" >
<LayoutTemplate>
<table id="product-master" class="table table-bordered table-striped">
<tr>
<th>Order #</th>
<th></th>
</tr>
<asp:PlaceHolder runat="server" ID="groupPlaceHolder1"></asp:PlaceHolder>
</table>
</LayoutTemplate>
<GroupTemplate>
<tr>
<asp:PlaceHolder runat="server" ID="itemPlaceHolder1"></asp:PlaceHolder>
</tr>
</GroupTemplate>
<ItemTemplate>
<td><%# Eval("OrderNo") %></td>
<td>
<asp:Button ID="btnDetails" runat="server" Text="Products" class="btn btn-primary btn-flat" CommandName="ViewDetails" CommandArgument='<%# Eval("OrderNo") %>' OnCommand="btnDetails_Command" />
</ItemTemplate>
</asp:ListView>
</div>
</div>
</div>
</div>
<div class="modal fade modal-primary" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title">Products List</h4>
</div>
<div class="modal-body">
<div class="box-body table-responsive no-padding">
<%# Eval("OrderNo") %>
<asp:ListView ID="LvDetails" runat="server" GroupPlaceholderID="groupPlaceHolder1" ItemPlaceholderID="itemPlaceHolder1">
<LayoutTemplate>
<table id="products" class="table">
<tr>
<th>Order #</th>
</tr>
<asp:PlaceHolder runat="server" ID="groupPlaceHolder1"></asp:PlaceHolder>
</table>
</LayoutTemplate>
<GroupTemplate>
<tr>
<asp:PlaceHolder runat="server" ID="itemPlaceHolder1"></asp:PlaceHolder>
</tr>
</GroupTemplate>
<ItemTemplate>
<td><%# Eval("OrderNo") %></td>
</ItemTemplate>
</asp:ListView>
</div>
<!-- /.box-body -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Done</button>
</div>
</div>
</div>
</div>
</section>
Not sure where is calling .showPopup(). That detail is important. But if its being called in any sort of page_load or anything that gets called from page_load then that would cause that problem.
Also if you're calling .showPopup() from some javascript code, then all javascript code gets run when the page is loaded/reloaded. You'd want to include some kind of conditional to make it call .showPopup() only when you need it to.
Do you have something like this in your project?
<script type="text/javascript">
$(window).load(function(){
$('#myModal').modal('show');
});
</script>
If so it might be the root of your issue, as this js function will set the modal to show on page load. You'll be able to find a lot simply by googling this issue as well.
I am working on a asp.net c# project which has a input box and a button. Input box has some validation and on successful validation I would like to open a bootstrap modal to fill further information. Is there any way to do this?
I tried using the JavaScript but its not working for me. Below is the code for same.
Default.aspx file code:
<input type="text" runat="server" name="mobile-no" placeholder="Mobile Number" class="contact-no" id="number" pattern="^\d{10}$" title="10 digit Mobile Number" required="required" />
<asp:Button CssClass="btn btn-success" ID="btnSell" runat="server" Text="Sell" OnClick="btnSell_Click" data-toggle="modal" data-target="#sell_request" />
Bootstrap Modal code:
<div class="modal fade" id="sell_request" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header text-center">
<a class="btn pull-right" data-dismiss="modal"><span>×</span></a>
<h3 class="register_header"><strong>Request Details</strong></h3>
<h6>Please fill below detials for submit a request</h6>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<a class="btn btn-success" data-dismiss="modal">Skip</a>
<span class="hidden-xs hidden-sm">OR</span>
<a class="btn btn-success" data-dismiss="modal">Submit</a>
</div>
</div>
</div>
</div>
CS Code on button click:
protected void btnSell_Click(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(this, GetType(), "ServerControlScript", "<script>$('#sell_request').modal('show');</script>", false);
}
I took your code as is and made the following changes:
Removed data-toggle="modal" data-target="#sell_request" from btnSell
Added CDN references to jQuery,bootstrap.js and bootstrap.css (in that order).
It works now!
Code behind:
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnSell_Click(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(this, GetType(), "ServerControlScript", "<script>$('#sell_request').modal('show');</script>", false);
}
.ASPX:
<head runat="server">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>
<body>
<form id="form1" runat="server">
<div class="modal fade" id="sell_request" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header text-center">
<a class="btn pull-right" data-dismiss="modal"><span>×</span></a>
<h3 class="register_header"><strong>Request Details</strong></h3>
<h6>Please fill below detials for submit a request</h6>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<a class="btn btn-success" data-dismiss="modal">Skip</a>
<span class="hidden-xs hidden-sm">OR</span>
<a class="btn btn-success" data-dismiss="modal">Submit</a>
</div>
</div>
</div>
</div>
<input type="text" runat="server" name="mobile-no" placeholder="Mobile Number" class="contact-no" id="number" pattern="^\d{10}$" title="10 digit Mobile Number" required="required" />
<asp:Button CssClass="btn btn-success" ID="btnSell" runat="server" Text="Sell" OnClick="btnSell_Click" />
</form>
</body>
Output:
Your bootstrap modal .aspx code looks good as far as I can tell. I am doing something similar, but I have the javascript defined in my .aspx file, and I just call it from code behind using script manager. Here is a sample of my code from default.aspx.cs:
ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "openContactModal();", true);
This calls a java script function that is defined in default.aspx:
<!--Modal Popup for Contacts-->
<script type="text/javascript">
/* Allows us to open and close the Address Book modal from code behind */
function openContactModal() {
$('#contactModal').modal('show');
}
function closeContactModal() {
$('#contactModal').modal('hide');
}
</script>
You can substitute openSellRequest() and #sell_request into this code and see if it works for you.
EDIT: Here is a sample of the default.aspx code for my modals - there are several extra elements in here, although I am not sure that they are required:
<div class="modal fade" id="contactModal" tabindex="-1" role="dialog" aria-labelledby="contactModalLabel" aria-hidden="true" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="contactModalLabel">Contact Info for <asp:Label ID="lblContactHeaderName" runat="server"></asp:Label></h4>
</div>
<div class="modal-body">
<asp:Table ID="contactTable" runat="server" Width="95%">
<asp:TableRow>
... your content here ...
</asp:TableRow>
</asp:Table>
</div>
<div class="modal-footer">
<asp:Button ID="deleteContact" CssClass="btn btn-danger" runat="server" Text="Delete" OnClick="deleteContact_Click" Visible="false" />
<asp:Button ID="editContact" CssClass="btn btn-primary" runat="server" Text="Edit" onclick="editContact_Click" />
<asp:Button ID="saveContact" CssClass="btn btn-primary" runat="server" Text="Save" OnClick="saveContact_Click" Visible="false" />
<asp:Button ID="cancelContact" CssClass="btn btn-default" data-dismiss="modal" runat="server" Text="Close" />
</div>
</div>
</div>
</div>
And here is my button code:
<asp:Button ID="btnShowContact" CssClass="btn btn-primary btn-sm dont-print" runat="server" OnClick="showContact" Text="Show Contact Details" data-toggle="modal" data-target="#contactModal" />