i have this modal :
<div class="modal fade" id="ModalServiceCalls" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" dir="rtl" id="CloseBTN">
×</button>
<h4 class="modal-title">
service call</h4>
</div>
<div class="modal-body">
</div>
<br />
<asp:Button ID="ServiceCallBTN" runat="server" Text="סגור קריאה" CssClass="btn btn-default"
Font-Bold="true" />
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
close</button>
<button type="button" class="btn btn-primary">
save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
I want to create a function in code behind that will start with this button click.
This is the code behind function:
protected void ServiceCallBTN_Click(object sender, EventArgs e)
{
Response.Write("checking");
}
The problem is that this function is not even fired.
You should add ServiceCallBTN_Click method in onClick event for the button in your markup.
Related
I'm trying to use asp.net grid row button for modal popup, its working for alert but cant call modal popup , how can i fix it?
<div id="confirm" class="modal hide fade">
<div class="modal-body">
Are you sure?
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-primary" id="delete">Delete</button>
<button type="button" data-dismiss="modal" class="btn">Cancel</button>
</div>
</div>
<asp:Button ID="btnDeletes" ToolTip="Delete" CommandArgument="<%# Container.DataItemIndex %>" OnClick="btnDelete_Click1" OnClientClick="test();"
CssClass="GridDeletebtn" runat="server" />
<script>
function test()
{
$('#confirm').show();
alert('df');
}
</script>
When you call, alert('df'), thread will be blocked until you click the "Ok" button of the alert then the postback will happen followed by.
But when you show the modal dialog only (without alert), it won't block the thread and hence postback will happen immediately.
Hence your modal dialogue will be disappeared after postback.
When you add `return false' as below, it will stop the postback.
<asp:Button ID="btnDeletes" ToolTip="Delete" CommandArgument="<%# Container.DataItemIndex %>" OnClick="btnDelete_Click1" OnClientClick="test();return false;" CssClass="GridDeletebtn" runat="server" />
Script
<script>
function test()
{
$('#confirm').modal('show');
//alert('df');
}
</script>
Html
<div id="confirm" class="modal hide fade" tabindex="-1" role="dialog">
<div class="modal-body">
Are you sure?
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-primary" id="delete">Delete</button>
<button type="button" data-dismiss="modal" class="btn">Cancel</button>
</div>
</div>
If you can share a URL that I can test. Then I will try it.
Moreover try to catch class name instead of id.
some thing like below.
$('.modal').show();
if you using gridview or repeater then call modal popup by below code
its working for me
<a class="btn btn-sm btn-warning" data-toggle="modal" data-target="#Remark_Modal<%# Eval("PrimaryID")%>">
<i class="fa fa-eye"></i> Details
</a>
<!--Modal-->
<div class="modal fade" id='Remark_Modal<%# Eval("PrimaryID")%>' role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content card-blue-fill">
<div class="modal-header card-header">
<button type="button" class="modal-close" data-dismiss="modal" aria-label="Close">
<i class="fa fa-2x fa-close"></i>
</button>
<h4 class="modal-title"><i class="fa fa-eye"></i> <%# Eval("MissionName")%></h4>
</div>
<div class="modal-body card-block">
<%# Eval("Remark")%>
</div>
</div>
</div>
</div>
Use a ScriptManager tag at the beginning of your modal, else your ScriptManager.RegisterStartupScript would not work. Below is the workaround that I use.
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<asp:ScriptManager ID="ScriptManager" runat="server"></asp:ScriptManager>
<div class="modal fade" id="myModal" 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">
<h4 class="modal-title"><asp:Label ID="errorMessage" runat="server" Text=""></asp:Label></h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
Code-behind
private void showModal(string error)
{
message.Text = error;
upModal.Update();
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "myModal", "$(document).ready(function () {$('#myModal').modal();});", true);
}
Call the above showModal() function with appropriate message. You may have to add modal header & modal footer if needed.
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');
}
I have two tabs First tab display me the details of employee whose age is less then 40 and the second tab display me the details of employee whose age is grater then 40 when I click the 1st tab and click the button show (whish is under 1st tab) pop up get generated for a form I have written it in bootstrap . But for the second tab when I click the button it only fades up no form is generated . When I used chrome debugger I found CSS for nodal fade is not getting generated automatically . I am new in Bootstrap please help me
<button type="button"
class="btn btn-info glyphicon glyphicon-plus"
data-toggle="modal"
data-target="#myModal{{$parent.$parent.$index}}{{$index}}">
Add URL
</button>
{{category.name}}{{$parent.$parent.$index}}{{$index}}
<div class="modal fade" id="myModal{{$parent.$parent.$index}}{{$index}}" role="dialog">
{{$parent.$parent.$index}} -- {{$index}}
<div class="modal-dialog" role="document">
<!-- Modal content-->
<div class="modal-content" >{{category.name}}
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form>
<p>
<input type="text" class="form-control"
name="uri" placeholder="Add URL" ng-model="uri">
</p>
</form>
</div>
<div class="modal-footer">
<button type="button" ng-click="addCustom()"
class="btn btn-success btn-sm col-lg-2 col-md-offset-3 glyphicon glyphicon-ok"
data-dismiss="modal">Add</button>
<button type="button"
class="btn btn-success btn-sm col-lg-2 col-md-offset-7 pull-centre glyphicon glyphicon-remove"
data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
I had this problem myself and found the solution. Bootstrap uses the following CSS media query to disable the modal fade animation (and a number of other transitions and animations) in certain circumstances:
#media (prefers-reduced-motion: reduce) {
.fade {
transition: none;
}
}
According to MDN, "The prefers-reduced-motion CSS media feature is used to detect if the user has requested that the system minimize the amount of animation or motion it uses." They have instructions there for changing this on various operating systems. (The Windows method worked for me: Settings > Ease of Access > Display > Show animations [On])
Please try to this format for design & modal work.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
http://getbootstrap.com/javascript/#modals
The seccond part, the modal part mus not be on the body. Move it just below the head ends, and before the body tag start.
<head>
.... //heade code here
</head>
MODAL HERE
<body>....
<button type="button"
class="btn btn-info glyphicon glyphicon-plus"
data-toggle="modal"
data-target="#myModal{{$parent.$parent.$index}}{{$index}}">
Add URL
</button>
...more code here
</body>
Your button can be inside the body, but your modal code should be outside of the main section.
<html>
<head>
</head>
<body>
<main>
<!-- button to trigger modal -->
</main>
<!--modal code here -->
</body>
</html>
When click to show, bootstrap adds this HTML somewhere at the bottom of the page:
If you want you can add it manually and try:
<div class="modal-backdrop fade show"></div>
I am trying to accomplish a cool modal that slides down onto the page. I ran into a problem and do not know what it could be, but when I click the button the modal isn't being loaded at all even though the #CmapModal shows up in the url. Any idea as to why the modal is not displaying when I click it?
Code for modal:
<p><a data-toggle="modal" href="#CmapModal" class="btn btn-default"><b>View Map »</b></a></p>
</div>
<!-- Modal -->
<div class="modal fade" id="CmapModal" tabindex="-1" role="dialog" aria-labelledby="CmapModalLabel" 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">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Not sure why you want to do this with only CSS and HTML.
Here is a working solution for you: http://jsfiddle.net/H4SDk/
I have added a short javascript code:
$( "#clickme" ).click(function() {
$( "#book" ).toggle("slow");
});
You can change the ID names yourself.
If I understood correct you just wanted the modal to show, right?
You have missed the class "hide" in your model div. Try this;
<div class="modal hide fade" id="CmapModal" tabindex="-1" role="dialog" aria-labelledby="CmapModalLabel" aria-hidden="true">
JSFiddle Example
So I am working a web project and hoping to use Bootstrap Modal Pop up. I implemented the codes but unfortunately my modal wont fire. I am using Visual Studio 2012 by the way.
I have included the following:
<script src="jquery/jquery-ui-1.10.4.custom.min.js"></script>
<script src="jquery/bootstrap.js"></script>
Here is my trigger for the modal:
<asp:Button ID="btnAddEvent" data-toggle="modal" data-target="#myModal" class="btn btn-default" runat="server" Text="Add Event" />
And here is my modal:
<div class="modal fade" id="myModal" 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">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
include the jQuery script before the bootstrap.js script file for the plugin to work.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
jquery/jquery-ui-1.10.4.custom.min.js
jquery/bootstrap.js
typo error 'jquery' folder or 'js' folder
DEMO