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

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

你要申请z-index的timepicker容器。

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