ASP.NET
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.19.custom.min.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="#loginModal" />
<div class="container">
<div class = "row">
<div class="modal fade" tabindex="-1" id="loginModal"
data-keyboard="false" data-backdrop="static">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×
</button>
<h4 class="modal-title">Login</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="inputUserName">Username</label>
<input class="form-control" placeholder="Login Username"
type="text" id="inputUserName" />
</div>
<div class="form-group">
<label for="inputPassword">Password</label>
<input class="form-control" placeholder="Login Password"
type="password" id="inputPassword" />
</div>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Login</button>
<button type="button" class="btn btn-primary"
data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
Don't know why the above code is not working form me.
You need to change the button a bit, by adding data-toggle="modal" and data-target="#loginModal", and changing the value of OnClientClick to "return false" to prevent re-loading of page due to postback
<asp:Button ID="Button1" runat="server" Text="Button" data-toggle="modal" data-target="#loginModal" OnClientClick="return false" />
More on Bootstrap Modals (although the documentation uses a normal button)
Related
I have built a form in HTML 5 that is in a modal window and wrapped in Bootstrap and the layout is perfect. I have the need to use another modal window, however instead of the form being built in HTML 5 I need to place and iframe in the modal and display and asp form. I have wrapped everything identically in Bootstrap, but for some reason the label next to my form control displays on top and not next to. I'm stumped, I have played with CSS for two days now trying to figure out why. Thoughts?
HTML CODE FOR FORM THAT LAYS OUT PERFECT
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content" style="width:100%">
<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">Observation Form</h4>
</div>
<div class="modal-body">
<form class="well form-horizontal" action=javascript:createNewObservation() method="post" id="observationForm">
<fieldset>
<!-- Form Name -->
<!-- Enter Building -->
<div class="form-group">
<label class="col-md-3 control-label">Building</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<select id="formBuilding" name="formBuilding" class="form-control selectpicker" required></select>
</div>
</div>
</div>
IMAGE FOR PERFECT LAYOUT
ASP CODE WRAPPED IN IFRAME THAT IS DISPLAYING IN MODAL
<form id="form1" runat="server" class="well form-horizontal">
<fieldset>
<legend>File Upload Form</legend>
<div class="form-group">
<label class="col-md-3 control-label">Choose File</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<asp:FileUpload class="form-control" ID="FileUpload1" runat="server" style="width:50%" />
</div>
</div>
</div>
<asp:HiddenField ID="site" runat="server" />
<asp:HiddenField ID="dateobserved" runat="server" />
<asp:HiddenField ID="guid" runat="server" />
<asp:HiddenField ID="username" runat="server" />
<asp:Button class="btn btn-primary pull-right" ID="Button1" runat="server" OnClick="Button1_Click" Text="Upload" />
</fieldset>
</form>
IMAGE FOR INCORRECT LAYOUT
To me it seems like you need to set a width to the iframe 'cause the modal size isn't changing. Try set width to 100% for the iframe
I have code html bootstrap, but when display incorrect.enter image description here
code bootstrap
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="../Content/bootstrap.min.js" rel="stylesheet" />
<script src="../Scripts/bootstrap.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<asp:Button runat="server" CssClass="btn btn-default" Text="Home" />
</div>
<div class="btn-group">
<asp:Button runat="server" CssClass="btn btn-default" Text="Cart" />
</div>
<div class="btn-group">
<asp:Button runat="server" CssClass="btn btn-default" Text="Products" />
</div>
<div class="btn-group">
<asp:Button runat="server" CssClass="btn btn-default" Text="Contact Us" />
</div>
</div>
</form>
</body>
</html>
when display on browser
It appears your bootstrap css is either not being included or you have some other css overriding it.
Translated from Google:
Nó xuất hiện "bootstrap.css" hoặc là không được bao gồm hoặc bạn có một số css khác ghi đè lên nó.
ASPX Markup:
<div class="btn-group btn-group-justified">
<div class="btn-group">
<asp:Button runat="server" CssClass="btn btn-default" Text="Home" />
</div>
<div class="btn-group">
<asp:Button runat="server" CssClass="btn btn-default" Text="Cart" />
</div>
<div class="btn-group">
<asp:Button runat="server" CssClass="btn btn-default" Text="Products" />
</div>
<div class="btn-group">
<asp:Button runat="server" CssClass="btn btn-default" Text="Contact Us" />
</div>
</div>
Renders HTML:
<div class="btn-group btn-group-justified">
<div class="btn-group">
<input type="submit" name="ctl00$MainContent$ctl00" value="Home" class="btn btn-default" />
</div>
<div class="btn-group">
<input type="submit" name="ctl00$MainContent$ctl01" value="Cart" class="btn btn-default" />
</div>
<div class="btn-group">
<input type="submit" name="ctl00$MainContent$ctl02" value="Products" class="btn btn-default" />
</div>
<div class="btn-group">
<input type="submit" name="ctl00$MainContent$ctl03" value="Contact Us" class="btn btn-default" />
</div>
</div>
Run the snippet and you can see it works.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<div class="btn-group btn-group-justified">
<div class="btn-group">
<input type="submit" name="ctl00$MainContent$ctl00" value="Home" class="btn btn-default" />
</div>
<div class="btn-group">
<input type="submit" name="ctl00$MainContent$ctl01" value="Cart" class="btn btn-default" />
</div>
<div class="btn-group">
<input type="submit" name="ctl00$MainContent$ctl02" value="Products" class="btn btn-default" />
</div>
<div class="btn-group">
<input type="submit" name="ctl00$MainContent$ctl03" value="Contact Us" class="btn btn-default" />
</div>
</div>
I have created a bootstrap form and using the 'required' parameter on a control to use html5 validation when I click the submit button.
When I do click the submit button the validation bubble appears for a second and disappears. I am not sure why it is doing this. I am using runat="server" on the controls as I need to access them from the codebehind page.
I have tried several options but still nothing.
A trimmed down version of the page below:
<%# Page Language="vb" AutoEventWireup="false" CodeBehind="test.aspx.vb" Inherits="iconCloud.test" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Client Details</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Tell the browser to be responsive to screen width -->
<link rel="stylesheet" href="../../Stylesheets/bootstrap.min.css">
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="../../StyleSheets/theme.css">
<!-- Theme style -->
<link rel="stylesheet" href="../../Stylesheets/iCheck.css">
<!-- iCheck for checkboxes and radio inputs -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
<!-- Google Font -->
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<form id="Main" runat="server" runat="server" >
<section class="content">
<p class ="text-left" style="padding-top:50px">
<h2><label id="lblFormName">Create Client</label></h2>
</p>
<p class="text-right">
<button type="submit" id="cmdSave" name="Save" runat="server" class="btn btn-primary">Save</button>
<button type="button" id="cmdCancel" name="Cancel" runat="server" class="btn btn-default">Cancel</button>
</p>
<div class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">Client Details</div>
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Client ID</label>
<input type="text" class="form-control" name="clientID" runat="server" id="txtClientID">
</div>
<div class="form-group">
<label>Client Name</label>
<input type="text" class="form-control" name="clientName" runat="server" id="txtClientName" required="required">
</div>
<div class="form-group">
<label>Company Name</label>
<input type="text" class="form-control" name="companyName" runat="server" id="txtCompanyName">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Title</label>
<select class="form-control select2" name="clientTitle" runat="server" id="cboTitle"></select>
</div>
<div class="form-group">
<label>Client Surname</label>
<input type="text" class="form-control" name="clientSurname" runat="server" id="txtSurname" required="required" >
</div>
</div>
</div>
<div class="col-md-6"><!--Left Column-->
<div class="form-group">
<label>Client Type</label>
<select class="form-control select2" name="clientType" runat="server" id="cboType"></select>
</div><!-- /.form-group -->
</div>
<div class="col-md-6"><!--Right Column-->
<div class="form-group">
<label>Client Status</label>
<select class="form-control select2" name="clientStatus" runat="server" id="cboClientStatus"></select>
</div><!-- /.form-group -->
</div>
</div><!-- /.Panel-body -->
</div>
</div>
</div>
</form>
</section>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</body>
</html>
I will add an answer and mark the question as a duplicate just to provide a reference for this issue if somebody else looks it up.
Updating the browser to the latest version should fix the issue. Here is the the original question link:
Related question with info on the bug fix for this issue
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>
Account Group - Add - My ASP.NET Application
</title><script src="/Scripts/modernizr-2.6.2.js"></script>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/Site.css" rel="stylesheet"/>
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" /></head>
<body>
<form method="post" action="./groupAdd" id="ctl01">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="tRJn2Kjwvz2Puav8tcpz3Ls6wGBUmb5Ja174Y3bdllDemDMYow1wPnjeUZgjA1y+av/mqygIOqBBxlrkr1A6axhfG/Ic4fMYi6poCOfltc5MR88HYxVigJJBG3tIvHfroT0iXc0csFM0mwyzWlNttzAhjZx7Xogq99vurKroKnK4q23wfM8J72YgScmhpcujEBgtDuKzbt8o6nu6VjwNYg==" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['ctl01'];
if (!theForm) {
theForm = document.ctl01;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<script src="/bundles/MsAjaxJs?v=c42ygB2U07n37m_Sfa8ZbLGVu4Rr2gsBo7MvUEnJeZ81" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>
<script src="Scripts/jquery-1.10.2.js" type="text/javascript"></script>
<script src="Scripts/bootstrap.js" type="text/javascript"></script>
<script src="Scripts/respond.js" type="text/javascript"></script>
<script src="/bundles/WebFormsJs?v=AAyiAYwMfvmwjNSBfIMrBAqfU5exDukMVhrRuZ- PDU01" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$ctl08', 'ctl01', [], [], [], 90, 'ctl00');
//]]>
</script>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Application name
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Register</li>
<li>Log in</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="form-group">
<label for="MainContent_eGroupCode" id="MainContent_lGroupCode">Group Code</label>
<input name="ctl00$MainContent$eGroupCode" type="text" maxlength="10" id="MainContent_eGroupCode" class="form-control" style="text-transform:uppercase" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="form-group">
<label for="MainContent_ddGroupType" id="MainContent_lGroupType">Group Type</label>
<select name="ctl00$MainContent$ddGroupType" id="MainContent_ddGroupType" class="form-control">
<option value="IN">Incomes</option>
<option value="EX">Expenses</option>
<option value="AS">Assets</option>
<option value="LI">Liabilities</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="form-group">
<label for="MainContent_eGroupName" id="MainContent_lGroupName">Group Name</label>
<input name="ctl00$MainContent$eGroupName" type="text" maxlength="40" id="MainContent_eGroupName" class="form-control" style="text-transform:uppercase" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<input type="submit" name="ctl00$MainContent$bSave" value="Save" id="MainContent_bSave" class="btn btn-success" />
</div>
</div>
<hr />
<footer>
<p>© 2016 - PFA</p>
</footer>
</div>
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="3AAE92F6" />
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="qSAzVSuS/WkdQ0+7cpffhRi71ZlGYos9x6mRfTlJETXx5PzLHrvJMrvKTBR+gk0eqMw6L0G8IaFchRCu2+y5qUSvQESXisN7B0rrXdNd3EB6D+zzcccmRVsiGszQD39higpryIq2R7q+im2eg0bLsdGa55i5eD7cOF8/Kh9ZNlMhO8NUTJ05Ef8LDMxYv+jB89mlh5Un6dkvjksggF8mBZp2pDYrDoGaINzbFwJzC5Q65UIgChzA9VRKUUWFG/BU" />
</div></form>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Firefox","requestId":"d3ed4f11e0994099a89d07a103267276"}
</script>
<script type="text/javascript" src="http://localhost:50950/1ed6bd9582884a84ad84c822a4bf5589/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
Version 2
<%# Page Title="Account Group - Add" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="groupAdd.aspx.vb" Inherits="PFA.groupAdd" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="form-group">
<asp:Label runat="server" ID="lGroupCode" Text="Group Code" AssociatedControlID="eGroupCode"></asp:Label>
<asp:TextBox runat="server" ID="eGroupCode" CssClass="form-control"></asp:TextBox>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="form-group">
<asp:Label runat="server" ID="lGroupType" Text="Group Type" AssociatedControlID="ddGroupType"></asp:Label>
<asp:DropDownList runat="server" ID="ddGroupType" CssClass="form-control">
<asp:ListItem Text="Incomes" Value="IN"></asp:ListItem>
<asp:ListItem Text="Expenses" Value="EX"></asp:ListItem>
<asp:ListItem Text="Assets" Value="AS"></asp:ListItem>
<asp:ListItem Text="Liabilities" Value="LI"></asp:ListItem>
</asp:DropDownList>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="form-group">
<asp:Label runat="server" ID="lGroupName" Text="Group Name" AssociatedControlID="eGroupName"></asp:Label>
<asp:TextBox runat="server" ID="eGroupName" CssClass="form-control"></asp:TextBox>
</div>
</div>
</div>
And the result - the dropdown is still wider than the text boxes above and below.
Please see screenshot of rendered for below. Why does the dropdownlist occupy the whole screen width while the other two controls don't? Very new to web development. Please advice and help. Many thanks. Iyer
<%# Page Title="Account Group - Add" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="groupAdd.aspx.vb" Inherits="PFA.groupAdd" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<div class="form-group">
<asp:Label runat="server" ID="lGroupCode" Text="Group Code" AssociatedControlID="eGroupCode"></asp:Label>
<asp:TextBox runat="server" ID="eGroupCode" CssClass="form-control"> </asp:TextBox>
</div>
<div class="form-group">
<asp:Label runat="server" ID="lGroupType" Text="Group Type" AssociatedControlID="ddGroupType"></asp:Label>
<asp:DropDownList runat="server" ID="ddGroupType" CssClass="form-control" width="100%">
<asp:ListItem Text="Incomes" Value="IN"></asp:ListItem>
<asp:ListItem Text="Expenses" Value="EX"></asp:ListItem>
<asp:ListItem Text="Assets" Value="AS"></asp:ListItem>
<asp:ListItem Text="Liabilities" Value="LI"></asp:ListItem>
</asp:DropDownList>
</div>
<div class="form-group">
<asp:Label runat="server" ID="lGroupName" Text="Group Name" AssociatedControlID="eGroupName"></asp:Label>
<asp:TextBox runat="server" ID="eGroupName" CssClass="form-control"></asp:TextBox>
</div>
As Webruster says, you have specified a width of 100%. However, that's not the whole story. Even without this, Bootstrap will by default define a CSS width of 100%. Try wrapping the whole block in a <div class="col-***"> tag to better control sizes. For example, col-sm-3.
See the Bootstrap documentation for how to control form sizes.
EDIT:
After chatting with the OP for a while, it transpired that the problem is with the Content/Site.css file that's automatically generated by Visual Studio when creating a new Web Forms app. Amongst other things, it contains the following style:
/* Set widths on the form inputs since otherwise they're 100% wide */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"]{
max-width: 280px;
}
This is overriding the default Bootstrap behavior. Furthermore, there is not (as far as I'm aware) an input type called select. Asp.net dropdown lists render to normal select tags. So what the above style does is restrict the maximum width of several input tags, without affecting the dropdown lists.
There are two solutions. First, we can simply delete this block entirely. This will allow Bootstrap to behave as expected, as far as form elements are concerned. This would be my preference.
Second, replace input[type="select"] with simply select. If it transpires that my knowledge of input types is lacking, then add ", select" after it, rather than replacing it (don't forget the comma!)
I am struggling to make this to work.
All I want is to open a bootstrap modal to open on the click of a button without refreshing the page.
Following is the modal
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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"><asp:Label ID="lblModalTitle" runat="server" Text="Send Confirmation"></asp:Label></h4>
</div>
<div class="modal-body">
<asp:Label ID="lblModalBody" runat="server" Text="Are you sure?"></asp:Label>
</div>
<div class="modal-footer">
<asp:Button ID="SendToBillingBtn" runat="server" CssClass="btn btn-primary" Text="Yes" OnClick="SendToBillingBtn_Click" />
<button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">No</button>
</div>
</div>
</div>
The button is
<asp:Button ID="TransferFileBtn" runat="server" CssClass="btn btn-primary" Text="Transfer file" OnClick="TransferFileBtn_Click" />
and in codebehind I have
protected void TransferFileBtn_Click(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "myModal", "$('#myModal').modal();", true);
}
I have used the following link as a reference Display Bootstrap Modal from Asp.Net Webforms
On the button click, I do see the modal popup but the page reloads. How can I avoid page to reload?
Thank you
If you do not need to postback to server, you can simply use standard input or button tag.
<button type="button" class="btn btn-primary"
data-toggle="modal" data-target="#myModal"> Launch demo modal </button>
Or just return false in client click event.
<asp:Button ID="TransferFileBtn" runat="server"
CssClass="btn btn-primary" Text="Transfer file"
OnClientClick="$('#myModal').modal(); return false;" />
How I tested
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="DemoWebForm.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>
<body>
<form id="form1" runat="server">
<button type="button" class="btn btn-primary"
data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<asp:Button ID="TransferFileBtn" runat="server"
CssClass="btn btn-primary" Text="Transfer file"
OnClientClick="$('#myModal').modal(); return false;" />
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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">
<asp:Label ID="lblModalTitle" runat="server" Text="Send Confirmation"></asp:Label></h4>
</div>
<div class="modal-body">
<asp:Label ID="lblModalBody" runat="server" Text="Are you sure?"></asp:Label>
</div>
<div class="modal-footer">
<asp:Button ID="SendToBillingBtn" runat="server" CssClass="btn btn-primary"
Text="Yes" OnClick="SendToBillingBtn_Click" />
<button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">No</button>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
As I'm not an expert on ASP. so im not sure about this but try removing runat="server" from your button.
Please find the code,Hope this will help you.
**//Button**
<asp:Button ID="TransferFileBtn" runat="server" CssClass="btn btn-primary" Text="Transfer file" OnClientClick="onTest();return false;" />
**//Popup code:**
<div class="modal fade" id="modalTest" tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true" style="width: 100%; height: 100%;">
<div class="modal-dialog">
<div class="modal-content" style="height: 700px">
<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" id="H2">
<asp:Label runat="server" ID="lblRSF" Text=""></asp:Label></h4>
</div>
<div class="modal-body">
**//Used Iframe**
<iframe runat="server" frameborder="0" id="frmExample" runat="server" style="width: 100%; height: 600px; overflow: hidden;"></iframe>
</div>
</div>
</div>
</div>
**//Js function
function onTest() {
$("#<%=lblRSF.ClientID%>").text("Demo");
//Admin/Example.aspx (write whatever you want to show in the popup)
$("#<%=frmMapExample.ClientID%>").attr("src", "../Admin/Example.aspx);
$('#modalTest').modal('show');
}