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
Related
So, I've been using a basic ng-bootstrap modal for an Angular app.
<ng-template #content let-modal>
<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title"></h4>
<button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss('Cross click')"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label for="dateOfBirth">Date of birth</label>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">Save</button>
</div>
</ng-template>
<button class="btn btn-lg btn-outline-primary" (click)="open(content)">Launch demo modal</button>
<hr>
To work, it needs the let-x tag, which then that x it used to control functions like dismiss and close. Why is that? Why can't an instance of Ngb-Modal handle these things? And most importantly, how does this all work?
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 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
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.