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

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" >

有什么想法吗？

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

Answer 1

您必须为 timepicker 个容器申请 z-index。

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

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

Timepicker appears behind the modal

html

javascript

css

jquery

datetimepicker