Angular 5-引导模式中的引导日期选择器

Question

我正在使用ngx-bootstrap作为日期选择器。但是，当我在模式内部使用此datepicker时，它将在模式下打开。

我的问题类似于this。但是CSS更改对我不起作用。任何需要帮助的人。

Answer 1

我认为您需要更改父类样式。 这将适用于 ngx-bootstrap 日历

按照这个代码 bs-datepicker-container, bs-daterangepicker-container { z-index: 2000; }

Answer 2

如果您遵循该答案，则很可能使用了错误的课程。

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

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

然后，您可能需要更改z-index以使其出现在模态上方。

问题是由于模式是body元素的直接子代，而datepicker日期选择器也是body元素的直接子代，因此它们竞争相同的z索引空间。

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

如果您的日期选择器具有类bs-calendar-container，则CSS如下所示：

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