javascript - 时间选择器出现在模态后面

Question

我正在使用 JQuery 的 Timepicker 插件。这是我的代码:

<div class="form-group">
     <label for="time">Time of Event</label>
     <input  id="time" class="timepicker" >
     </input>
</div>

<script>

$(document).ready(function() {
    $('input.timepicker').timepicker({});
});
</script>

但是，我得到这样的结果:

如您所见，时间选择器出现在模态窗体后面，我无法访问它。我认为这与 z-index 有关，所以我正在研究它。但是，我这次没有成功。

这是我试过的:<input id="time" class="timepicker" style="z-index:1151 !important" >

有什么想法吗？

编辑:好的，所以当我尝试更改 z-index 时出于某种原因的 timepicker它不会改变。就像它被什么东西覆盖了一样。但是，如果我在 Google Chrome Inspect 中手动更改它它工作的窗口。

Answer 1

您必须为 timepicker 容器应用 z-index。

.ui-timepicker-container{ 
     z-index:1151 !important; 
}