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>
Related
I am using react, with bootstrap installed as an node package. N.B. This is the bootstrap packet, not the react-bootstrap, or reactstrap packet. I've followed the instructions on the bootstrap modal page, to create a modal that is toggled by a button. This exact code has worked for me in the past, but not within a react app, so I am confident that this is the issue.
Button:
<button
type="button"
className="btn btn-primary"
data-toggle="modal"
data-target="#exampleModal"
>
Login
</button>
Modal:
<div
className="modal fade"
id="exampleModal"
tabindex="-1"
role="dialog"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div className="modal-dialog" role="document">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title" id="exampleModalLabel">
Modal title
</h5>
<button
type="button"
className="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div className="modal-body">...</div>
<div className="modal-footer">
<button
type="button"
className="btn btn-secondary"
data-dismiss="modal"
>
Close
</button>
<button type="button" className="btn btn-primary">
Save changes
</button>
</div>
</div>
</div>
</div>
The button renders properly, and so does the modal. Manually switching the modal visibility gives a proper modal, so I can conclude that the issue is in the button toggling the visibility.
I have a problem: I pass a collection to a view. Then I iterate through it and display some data. In normal markup, it works, but in modal it doesn't. Please tell me why modal code does not show the data.
Here is the view:
#model IEnumerable<Models.ToDO>
#foreach (var item in Model)
{
#if (item.isDone == true)
{
<div class="done-element element">
<p>
Title: #Html.DisplayFor(modelItem => item.Title)
</p>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" 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">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>
Description: #Html.DisplayFor(modelItem => item.Desc)
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
}
}
EDIT: I found some strange things: all modals display this value, but all take it from the first element
EDIT2: I found the solution. Target data is ID and take first found element. Changing ID to variable fix problem.
I've got a web app running Twitter Bootstrap 3. Following an upgrade to 3.3, the modal backdrop breaks when I add content to the modal after it opens.
JsFiddle example, Bootstrap 3.2: Content is dynamically added to the modal after the modal opens, and the backdrop resizes appropriately.
JsFiddle example, Bootstrap 3.3: Content is dynamically added to the modal after the modal opens. When you scroll down, the backdrop is only as high as the window was before the content was added. If you resize the window, the backdrop finally resizes.
My modals are absolute bog-standard, straight off the Bootstrap demo. What gives?
<!-- 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" aria-hidden="true">
<div class="modal-dialog">
<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>
$("#myModal").on('shown.bs.modal', function () {
var i = 1;
while (i < 100) {
$("#myModal").find(".modal-body").append("<p>Content " + i + " added after modal opened</p>");
i++;
}
});
</script>
This problem has been solved in bootstrap version 3.3.5. so just use Bootstrap CSS and JS for version 3.5 and above. It will work well.
It's a known open bug in Bootstrap's Modal widget: https://github.com/twbs/bootstrap/issues/15136
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'm having trouble with displaying the modal for the specific image clicked on to view.
If i use a link with a class it will show all of the images in that album in seperate modals (have to close them all down). I want to show the appropriate modal for the image that I click "view" on so that it is corresponding.
If i set this to id and create an id in the top div it will display the first image in the album only, no matter what image i click on.
How could I solve this?
<a class="btn btn-link" href=".modal" data-toggle="modal"><i class="icon-fullscreen"></i> View</a>
<!--POP OVER OF IMAGE-->
<div class="modal hide fade" tabindex="-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 id="myModalLabel">Pansnap</h3>
</div>
<div class="modal-body">
<!--This is for the 360 viewer-->
<?php echo '<img src="uploads/', $image["album"], '/', $image["id"], '.', $image["ext"],'"/>'?>
<!--360 viewer end-->
</div>
<div class="modal-footer">
<?php echo '<a class="btn btn-link" href="uploads/', $image["album"], '/', $image["id"], '.', $image["ext"],'">Download</a>'?>
</div>
</div>
One way to approach this is to store the various unique data components on each of the links and then have a generic handler which will load that data into the relevant elements of a single modal.
For instance, something along the lines of:
HTML
<a class="btn btn-link" href="#imageModal" data-toggle="modal" data-image="uploads/album/01.jpg" data-download="uploads/album/01.jpg"><i class="icon-fullscreen"></i> View</a>
<a class="btn btn-link" href="#imageModal" data-toggle="modal" data-image="uploads/album/02.jpg" data-download="uploads/album/02.jpg"><i class="icon-fullscreen"></i> View</a>
<!--POP OVER OF IMAGE-->
<div id="imageModal" class="modal hide fade" tabindex="-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 id="myModalLabel">Pansnap</h3>
</div>
<div class="modal-body">
<img id="snap"/>
</div>
<div class="modal-footer">
<a id="download" class="btn btn-link">Download</a>
</div>
</div>
Where you could load each image's data into the data attributes via PHP.
JS
$(document).on('click.modal.image-data', '[href=#imageModal]', function () {
$('#snap').attr('src',$(this).data('image'))
$('#download').attr('href', $(this).data('download'))
})
This will load the appropriate data in the modal elements.
JSFiddle