jquery timepicker未显示在模态窗口中答案

【问题标题】：jquery timepicker not showing in modal windowjquery timepicker未显示在模态窗口中
【发布时间】：2018-01-26 03:52:08
【问题描述】：

我是发布问题的新手，如果有任何错误，请提前道歉。我无法让 jquery timepicker 出现在模式窗口中（它出现在窗口后面），想知道是否有人对如何解决这个问题有任何建议。这是jsfiddle中的链接

[https://jsfiddle.net/Lrqcczde/2/]

    <!-- Button trigger modal -->
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-
    target="#myModal">Launch Time picker</button>
    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;
          </button>
          <h4 class="modal-title" id="timepicker">Time Picker</h4>

       </div>
       <div class="modal-body">
        <div class="col-md-12">
          <div class="row">
            <label for="timepicker1">Start Time:</label>
            <div class="form-group">
              <div class="input-group">
                <input name="timepicker1" id="timepicker1" readonly="readonly" 
             class="form-control timepicker1">
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-
          dismiss="modal">Close</button>
        </div>
         </div>
        <!-- /.modal-content -->
       </div>
       <!-- /.modal-dialog -->
     </div>
     <!-- /.modal -->

提前谢谢你。彼得

【问题讨论】：

标签： jquery bootstrap-modal

【解决方案1】：

您可以在初始化时间选择器时添加 zindex 选项。这是我的解决方案

$('.timepicker').timepicker({ zindex: 9999999});

https://timepicker.co/options/

【讨论】：

【解决方案2】：

你可以试试这个 css

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

【讨论】：

谢谢 Udara Kasun，我在发帖前确实尝试过，但没有成功。
请用ctrl+F5试试
彼得，你没有在我的 jsfindle 示例上方尝试过吗？
谢谢 Udara Kasun，现在运行良好。我确实更改为 bootstrap 4 css 并且这有效，但会使用您的 css 方法。再次感谢非常感谢。彼得

【解决方案3】：

您可以尝试为 z-index 设置较大的值，并且它对我有用

.bootstrap-timepicker-widget.dropdown-menu {
    z-index: 1700 !important;
}

【讨论】：