jQuery Bootstrap Datepicker 显示在 popover 后面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16897285/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Datepicker is displaying behind popover
提问by Daft
I'm trying to display a datepicker in a popover (using bootstrap and bootstrap-datepicker extension) and having some issues, first I had a problem with displaying the datepicker and found this topic : Datepicker in Popover Won't display,but now it's displaying behind my popover so it's not fully visible
我正在尝试在弹出窗口中显示日期选择器（使用引导程序和引导程序日期选择器扩展）并且遇到了一些问题，首先我在显示日期选择器时遇到了问题并找到了这个主题：弹出窗口中的日期选择器不会显示，但现在是显示在我的弹出框后面，所以它不完全可见
Here is the HTML code :
这是 HTML 代码：
<button type="submit" class="btn btn-primary pop_doleance" rel="popover" data-original-title="Ajouter doléance">Ajouter doléance</button>
<div style="display: none" class="pop_doleance_content">
<form class="well form-inline form_doleance">
<label for="date">Date : </label>
<input id="date" type="text" class="input-medium">
</form>
And the Javascript code :
和 Javascript 代码：
var tmp = $.fn.popover.Constructor.prototype.show;
$.fn.popover.Constructor.prototype.show = function (){
tmp.call(this);
if (this.options.callback) {
this.options.callback();
}
}
$(function (){
$(".pop_doleance").popover({
placement:'bottom',
html : true,
content: function(){return $('.pop_doleance_content').html();},
callback: function(){$('#date').datepicker();}
});
});
Any ideas ?
有任何想法吗 ？
回答by Bilal Murtaza
set popup's z-index to a lower value.
将弹出窗口的 z-index 设置为较低的值。
.popup { z-index : 900; }
and set datepicker's container z-index to a higher value like in case of jquery ui datepicker set
并将 datepicker 的容器 z-index 设置为更高的值，例如 jquery ui datepicker set
.ui-datepicker-div { z-index: 999; }
回答by Glyn
In the css I added:
在我添加的 css 中：
.datepicker {
z-index: 999 !important;
}
Note the "!important". It did not work without this.
注意“！重要”。没有这个，它就无法工作。
