Angular 5 - Bootstrap模式中的Bootstrap datepicker

Question

我正在使用ngx-bootstrap作为datepicker。但是当我在模态中使用这个日期选择器时，它会在模态下打开。

我的问题类似于this。但css的改变对我不起作用。任何帮助，将不胜感激。

Answer 1

如果您遵循该答案，您可能正在使用错误的课程。

我看了一下the github code，看到那里使用的类名是bs-calendar-container。

您可能希望通过在开发人员工具（F12）中检查它们并验证它们上的类名来验证错误的z索引元素的情况。

然后您可能想要更改z-index以使它们出现在模态上方。

问题是由模态作为body元素的直接子元素引起的，而datepicker日期选择器也是body元素的直接子元素，因此它们竞争相同的z-index空间。

引导模态通常具有1000的z-index。因此，将datepicker项的z-index设置为1200应该有所帮助，以确保它们也出现在模态中存在的元素上方。

如果你的datepicker有类bs-calendar-container，你的CSS看起来像这样：

.bs-calendar-container {
    z-index: 1001;
}