時間選擇器出現在模態后面

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; 
}