DatePicker 在 Bootstrap 3 (Safari/Chrome) 中的模态 window 上未正确显示

Question

我正在使用 AdminLTE/Bootstrap 作为后端仪表板，但在显示带有 DatePickers 的模态 windows 时遇到问题。

我有以下 JS 代码可以从其他页面加载内容（我只是将 class load-external 添加到链接）：

$('.load-external').click(function(ev) {
    var href = $(this).attr('href');
    $('#externalModal').find('.modal-body').load(href);
    $('#externalModal').find('.modal-title').text($(this).attr('data-confirm-title'));
    $('#externalModal').modal({
        show: true
    });
    return false;
});

问题是在 div 中加载带有 DatePicker 的表单，例如：

<input id="agreement_payment_estimatedPayingDate"
    name="agreement_payment[estimatedPayingDate]" 
    class="form-control" 
    required="required" 
    type="date" 
    value="2016-06-22"
    data-date-format="yyyy-mm-dd"
    data-provide="datepicker" />

DatePicker 显示在模态下面window

在 firefox 中可以正常工作，但在 Chrome 和 Safari 中都不能。

知道为什么会这样吗？

Answer 1

就像这里描述的那样：

只需使用css，并将z-index设置为大于1150，即模态z-index。

<style>
    .datepicker{z-index:1151 !important;}
</style>

DatePicker 在 Bootstrap 3 (Safari/Chrome) 中的模态 window 上未正确显示

DatePicker not showing properly on a modal window in Bootstrap 3 (Safari/Chrome)

jquery

datepicker

twitter-bootstrap

twitter-bootstrap-3

adminlte