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
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 modal set up, using Bootstrap, which is working just fine. The modal brings up some text and an image. When I hover on the modal element, a button, there is a nice blue highlight that pops up, I'd like to keep that. The issue is, when I close the modal window the blue highlight stays on the button, I'd like to get rid of this.
I thought this CSS...
.modal-open .modal,
.btn:focus{
outline: none !important;
}
...would remove the highlight, but it I'm still left with the blue highlight after I close the modal. The following is the code for the modal...
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal"><img src='http://lorempixel.com/g/400/200'></button>
<!-- Modal -->
<div id="myModal" class="modal fade" 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">Some Title</h4>
</div>
<div class="modal-body">
<p>Some text about something, Some text about something, Some text about something.</p>
<a href='http://codepen.io'><img src='http://lorempixel.com/g/400/200'></a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Thanks in advance for any assistance.
This is by design and is important for accessibility. On close, modals should return focus to launching element. If the button wouldn't get it's focus back it would break keyboard/tabbed accessibility. Please refer to this github issue.
If you want to remove the glow, or blue "highlight" i recommend toggling an extra CSS class on modal show/hide. For example:
<button id="openButton" type="button" class="btn btn-info btn-lg btn-no-highlight" data-toggle="modal" data-target="#myModal"><img src='http://lorempixel.com/g/400/200'></button>
$(function(){
$('#myModal').on('hidden.bs.modal', function (e) {
$('#openButton').toggleClass('btn-no-highlight');
});
$('#myModal').on('shown.bs.modal', function (e) {
$('#openButton').toggleClass('btn-no-highlight');
});
});
.btn.btn-no-highlight {
background-color: #5bc0de;
border-color: #46b8da;
outline: none !important;
}
I have created a fiddle to demonstrate this: https://jsfiddle.net/e61r4ba3/
Try using this
$('#myModal').on('shown.bs.modal', function(e){
$('#myModaltrigger').one('focus', function(e){$(this).blur();});
});
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 have a Bootstrap modal that shows for filling some data, if the data is incorrect, actually I show an alert and it appears on top.
Now I have a new requirement, create custom alert dialogs. In other parts of the form, there is not a problem, but when I have the Bootstrap modal, if I show the modal in a normal way, it appears in the bottom of the Bootstrap modal (example in this fiddle).
I've looked other questions like this and this and I've tried with z-index (example in this fiddle) and dialog shows in top, but I cannot click anywhere
$(".ui-dialog").css({ 'z-index' : 1000 });
$("#myModal").css({ 'z-index' : 0 });
Also I've tried to disable the modal and enable the dialog without success.
Is this answer correct, and there is no way I can achieve this without more plugins?
The default z-index of the bootstrap modal window as defined in the variables.less file lies at 1050.
#zindex-modal: 1050;
So if you want to place your jquery-ui dialog above that you would at least have to add a z-index value that is greater than the one of the modal window. Or change the modal window z-index to something lower, but i would not do that.
$("#btnalert").click(
function action () {
alert("this is an alert on top");
}
);
$("#btndialog").click(
function action () {
$("#dialog").html("dialog on the back");
$("#dialog").dialog();
$(".ui-dialog").css({
zIndex: '1060',
top: '100px'
});
prepareDialog();
}
);
function prepareDialog() {
$("html, body").animate({ scrollTop: 0 }, "slow");
$(".ui-dialog-titlebar").css({ background: '#F7985D' });
$(".ui-dialog .ui-dialog-content").css({ 'text-align': 'center' });
}
.ui-dialog {
/*z-index: 1060 !important;*/
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" 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>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" id="btnalert" >ALERT</button>
<button class="btn btn-default" id="btndialog" >DIALOG</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="dialog" hidden></div>
As of version 1.10.0+, you can specify in your initialization where to "append" the dialog using the appendTo option and assign it your modal id. No changing of z-indexes anymore.
$("#yourDialogId").dialog({
autoOpen: false,
appendTo: "#yourModalId",
modal: true,
});
try this one on your fiddle:
<button class="btn btn-default" data-dismiss="modal" id="btndialog" >DIALOG</button>
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