I am trying to get a modal box to show. Whenever I click the button, it fades but the modal box does not show. Does anyone know the problem with my code?
asp:Button ID="searchMRF" UseSubmitBehavior="false" runat="server" CssClass="btn-primary active" Text="Search MRF No." Height="31px" Width="139px" data-toggle="modal" data-target="#TestModal" />
<%-- MODAL --%>
<div id="TestModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<%-- MODAL CONTENT --%>
<div class="modal-content">
<div class="modal-header">
<asp:Button ID="close1" class="close" Text="x" runat="server" />
<asp:Label class="modal-title" runat="server" Text="TESTING"></asp:Label>
</div>
<div class="modal-body">
<asp:Label runat="server" class="modal-lg"></asp:Label>
</div>
<div class="modal-footer">
<asp:Button ID="close2" runat="server" Text="Close" />
</div>
</div>
</div>
</div>
Related
I have a question I can't click the dropdown button in ajax:comboBox in a modal popup
<asp:Panel ID="panel1" runat="server">
<div class="modal fade" id="setup" tabindex="-1" role="dialog" aria-labelledby="ModalTitle" aria-hidden="true">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="head4">Title HEAD modal</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-7 col-xs-7 col-7 col-md-7">
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<Triggers>
</Triggers>
<ContentTemplate>
<ajaxToolkit:ComboBox ID="modelistInject" runat="server" AutoCompleteMode="SuggestAppend" >
</ajaxToolkit:ComboBox>
<asp:Button runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
when I click button from <asp:Button runat="server"/> It will show dropdown button
when I do not click it, it does not display a dropdown button.
I had written code for modal popup but its not working, I am new to .net so i don't know how its work so please help me in that.. On clicking add button i want to open modal popup but its not working.
<script type="text/javascript">
$(function () {
$("#btn_add_new").click(function () {
$('#UsersModal').modal('show');
});
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<asp:Button ID="btn_add_new" runat="server" Text="Add New" CausesValidation="False" CssClass="button" data-target="#UsersModal"
/>
<div class="modal fade" id="UsersModal" role="dialog">
<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="ModalTitle">
New User</h4>
</div>
<div class="modal-body">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div class="col-sm-3">
<asp:Label ID="lbluname" Font-Size="Large" runat="server" Text="Username"></asp:Label>
</div>
<div class="col-sm-5">
<asp:TextBox ID="txtname" runat="server"></asp:TextBox>
</div>
<br />
<div class="col-sm-3">
<asp:Label ID="Label1" Font-Size="Large" runat="server" Text="Username"></asp:Label>
</div>
<div class="col-sm-5">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</div>
<asp:CheckBox ID="chkRememberMe" Text="Remember Me" runat="server" />
<asp:Button ID="Button2" runat="server" CssClass="btn btn-primary" Text="Save" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</div>
</asp:Content>
You could just use a html button like this:
<button type="button" class="btn btn-primary" CssClass="button"
data-toggle="modal" data-target="#UsersModal">Add New</button>
Your javascript is not required to open the modal.
The modal opens fine on my test page using your modal code.
I am having a strange problem and have spent the majority of the last 4 working hours trying to figure this out. I have read most of the similar questions on here but they are either not working due to a div mismatch or are wanting to open one modal from another.
I have a gridview containing data records with 3 link buttons in a template field. 2 of these buttons need to call up a modal where the user can either view more details or cancel the record.
The problem I am facing is that whichever modals code I put first in the aspx page, that modal displays correctly. Any modals after that only displays the black overlay.
I have read somewhere that this may be due to the z-index but I have not been able to get this working. Any guidance will be appreciated.
Gridview Markup:
<asp:GridView ID="gvEnquiries" runat="server" CssClass="table table-hover table-striped" GridLines="None" AutoGenerateColumns="False" DataKeyNames="EnquiryID">
<Columns>
<asp:BoundField HeaderText="EnquiryID" DataField="EnquiryID" Visible="false" />
<asp:BoundField HeaderText="Enquiry No" DataField="EnquiryNo" />
<asp:BoundField DataField="EType" />
<asp:BoundField HeaderText="Company" DataField="Company" />
<asp:BoundField HeaderText="Description" DataField="Description" />
<asp:BoundField HeaderText="Assigned To" DataField="AssignedTo" />
<asp:BoundField HeaderText="Address By" DataField="AddressBy" DataFormatString="{0:dd MMM yyyy}" />
<asp:BoundField HeaderText="Enquiry Date" DataField="EnquiryDate" DataFormatString="{0:dd MMM yyyy}" />
<asp:TemplateField>
<ItemTemplate>
<div class="btn-group pull-right">
<asp:LinkButton CssClass="btn btn-info" ID="btnView" runat="server" data-toggle="tooltip" data-placement="bottom" ToolTip="View Details" OnClick="btnView_Click"><span class="glyphicon glyphicon-eye-open"></span></asp:LinkButton>
<asp:LinkButton CssClass="btn btn-info" ID="LinkButton1" runat="server" data-toggle="tooltip" data-placement="bottom" ToolTip="Create Quote"><span class="glyphicon glyphicon-credit-card"></span></asp:LinkButton>
<asp:LinkButton CssClass="btn btn-info" ID="btnCloseEnq" runat="server" data-toggle="tooltip" data-placement="bottom" ToolTip="Close Enquiry" OnClick="btnCloseEnq_Click"><span class="glyphicon glyphicon-ban-circle"></span></asp:LinkButton>
</div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
The modals are being called from code side using the following line of code, obviously changing the ID for the seperate calls:
ScriptManager.RegisterStartupScript(this, this.GetType(), "none", "<script>$('#CloseEnq').modal('show');</script>", false);
The actual markup for the 2 modals are:
<div class="modal fade" id="ViewEnqDetail" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-mid modal-dialog">
<div class="modal-content">
<asp:UpdatePanel ID="updViewEnqModal" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">
<asp:Label runat="server" ID="lblViewEnqTitle"></asp:Label></h4>
</div>
<div class="modal-body">
<div class="container-fluid">
****Body Content In Here*******
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div class="modal-footer">
<button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</div>
and
<div class="modal fade" id="CloseEnq" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-mid modal-dialog">
<div class="modal-content">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">
<asp:Label runat="server" ID="Label1"></asp:Label></h4>
</div>
<div class="modal-body">
<div class="container-fluid">
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div class="modal-footer">
<button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</div>
After another 7 hours I have finally found the culprit.
The order in which the tags were closed were incorrect. The body div was only being closed after the update panel and its content div was.
I can display a Modal when using an ASP.Net button (while using the solution given here: Display Bootstrap Modal from Asp.Net Webforms)
My problem is that the Modal doesn't display when I add ASP.Net Validation to the form. Any idea why this might be?
This is the Modal:
<!-- Success Modal -->
<div class="modal fade" id="modSuccess" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<asp:UpdatePanel ID="upModal" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<ContentTemplate>
<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="lModalTitle" runat="server" Text=""></asp:Label></h4>
</div>
<div class="modal-body">
<asp:Label ID="lModalBody" runat="server" Text=""></asp:Label>
</div>
<div class="modal-footer">
<button class="btn btn-info" data-dismiss="modal" aria-hidden="true">
Close</button>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
This is one of the Validation blocks:
<div class="form-group">
<label>
Year of Birth*</label>
<asp:TextBox class="form-control" ID="tYOB" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvYOB" runat="server" ControlToValidate="tYOB" Display="None" ErrorMessage="Year of Birth is required" ValidationGroup="Choice"></asp:RequiredFieldValidator>
<asp:ValidatorCalloutExtender ID="rfvYOBValidatorCalloutExtender" runat="server" TargetControlID="rfvYOB" Enabled="True">
</asp:ValidatorCalloutExtender>
<asp:RegularExpressionValidator ID="revYOB" runat="server" ControlToValidate="tYOB" Display="None" ErrorMessage="Year of Birth must be a 4 digit Year" ValidationExpression="^\d{4}$" ValidationGroup="Choice"></asp:RegularExpressionValidator>
<asp:ValidatorCalloutExtender ID="revYOB_ValidatorCalloutExtender" runat="server" TargetControlID="revYOB" Enabled="True">
</asp:ValidatorCalloutExtender>
</div>
And here is the button:
<div class="form-group">
<asp:Button class="btn btn-success" ID="btnInsert" runat="server" CausesValidation="True" Text="Insert Choice" ValidationGroup="Choice" />
</div>
And here is the CodeBehind:
Protected Sub btnInsert_Click(sender As Object, e As System.EventArgs) Handles btnInsert.Click
'This inserts the Choice
Try
With CInfo
'More code here
.insert()
End With
lModalTitle.Text = "Choice Entered"
lModalBody.Text = tChoice.Text & " has been successfully entered"
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "modSuccess", "$('#modSuccess').modal();", True)
upModal.Update()
Catch ex As Exception
'Catch Code
End Try
End Sub
I am trying to show pop-up on clicking Button named "Lunch Break", it works fine when am using normal Bootstrap button button control.
But i want use asp:Button control to show same pop-up but pop-up does appears on clicking on that button, it just refresh the page.
aspx code :
<asp:Button ID="btnLunchBreak" runat="server" Text="Lunch Break" CssClass="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" />
<div class="modal fade panel panel-primary" id="myModal" tabindex="-1" runat="server" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false" >
<div class="modal-dialog panel panel-primary ">
<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>
<h2 class="modal-title" id="gridSystemModalLabel" style="color: red">Lunch Break</h2>
</div>
<div class="modal-body">
<div class="container-fluid">
<br />
<br />
<asp:UpdatePanel ID="UpdatePanel3" runat="server">
<ContentTemplate>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<asp:Button ID="btnLunchStart" runat="server" CssClass="btn btn-success" Text="Start" OnClick="btnLunchStart_Click" />
<asp:Button ID="btnLunchStop" runat="server" CssClass="btn btn-success" Text="Stop" OnClick="btnLunchStop_Click" />
</div>
<div class="col-md-4"></div>
</div>
<div class="col-md-4"></div>
<div class="col-md-4">
<asp:Label ID="lbl_LTimer" runat="server" CssClass="h3" ForeColor="Blue"></asp:Label><br />
<asp:Label ID="lbl_Lhour" runat="server" Visible="false" CssClass="h4" ForeColor="Black" Text="Hr :"></asp:Label>
<asp:Label ID="lbl_LMin" runat="server" Visible="false" CssClass="h4" ForeColor="Black" Text="Min :"></asp:Label>
<asp:Label ID="lbl_LSec" runat="server" Visible="false" CssClass="h4" ForeColor="Black" Text="sec"></asp:Label>
<br />
<asp:Label ID="lbl_LHr" runat="server" CssClass="h3" Font-Bold="true" Font-Size="20" ForeColor="red"></asp:Label>
<br />
<br /> <br /><br /><br /><br /><br />
<asp:Label ID="lbl_Lbrkresp" runat="server" Visible="false"></asp:Label>
<asp:Timer ID="Timer3" runat="server" Interval="1000000" OnTick="Timer3_Tick">
</asp:Timer>
</div>
<div class="col-md-4"></div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
am not familiar with bootstrap may be am doing it in wrong way. Suggest any solution
You can try to set the attribute UseSubmitBehavior to false.
Thus, ASP will not render a submit, but a simple button instead.
Hope that helps! =)