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>
Related
I am trying to show a chart inside of a modal.
I am using Meteor with the maazalik:highcharts package. Initially, when the modal appears the chart is outside of the modal. As soon as I resize the window, the chart appears correctly inside the modal.
A button click event triggers:
$('#accountsDetailsModal').modal('show');
My modal sits in a template:
<template name="AccountsGraph">
<div id="accountsDetailsModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close on-close" data-dismiss="modal">×</button>
<h4 class="modal-title">Accounts Details</h4>
</div>
<div class="modal-body">
<div id="container" style="width:100%;margin: 0 auto">
{{> highchartsHelper chartId="accountsDetails" chartWidth="100%" charHeight="100%" chartObject=accountsGraph}}
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default on-close" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</template>
EDIT: I replaced my click event handler and it worked.
$('#accountsDetailsModal').modal('show');
setTimeout(function(){
console.log("reflow");
$("#accountsDetails").highcharts().reflow();
},200);
add to your config object:
func: function(chart) {
setTimeout(function() {
chart.reflow();
}, 0);
}
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>
Check that plunker example:
Plunker
<body ng-app="app">
<div class="flexbox margin-top">
<div class="flexible"></div>
<div class="flexbox">
<button class="btn btn-sm btn-success" popover-template="'template.html'" popover-placement="left">Click</button>
</div>
</div>
<script type="text/ng-template" id="template.html">
<div>
<textarea>Some text, some text, some text</textarea>
<button class="btn btn-sm">Update</button>
</div>
</script>
When I click the button, popover shows up at the left top corner of the page for a short time than it goes to its correct position. How can I prevent that flicker?
A possible solution is to integrate angular-animate to enable the fade-in. Just insert <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.js"></script> into the head and register the module in your script.js: angular.module('app', ['ui.bootstrap', 'ngAnimate']);
See a demo here: http://plnkr.co/edit/NJU9F9ETHe2qMczY8knl?p=preview
Hope it helps!
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