DatePicker 在 Bootstrap 3 (Safari/Chrome) 的模式窗口中未正确显示

Question

我正在将 AdminLTE/Bootstrap 用于后端仪表板，但在显示带有 DatePickers 的模态窗口时遇到问题。

我有以下 JS 代码来加载其他页面的内容（我只是将类 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 显示在模态窗口下方

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

知道为什么会发生这种情况吗？

Answer 1

就像这里描述的： https://stackoverflow.com/a/15183778/1041895

使用css，设置z-index大于1150，即模态z-index。

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