Bootstrap Datepicker显示在弹出窗口后面

Bootstrap Datepicker is displaying behind popover

本文关键字：窗口 Datepicker 显示 Bootstrap      更新时间：2023-09-26

我试图在弹出窗口显示一个日期picker(使用bootstrap和bootstrap-datepicker扩展)，并有一些问题，首先，我有一个显示日期picker的问题，并发现这个主题:日期picker在弹出窗口不会显示，但现在它显示在弹出窗口的后面，所以它不是完全可见的

下面是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>

和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();}
    });  
});

有什么想法吗?

设置一个较低的z-index值

.popup { z-index : 900; }

并将datepicker的容器z-index设置为更高的值，例如jquery UI datepicker set

.ui-datepicker-div { z-index: 999; }

在css中我添加了:

.datepicker { 
    z-index: 999 !important;
}

注意"!important"。

相关文章：