Question

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

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

提前谢谢你。彼得

Answer 1

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

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

https://timepicker.co/options/

Answer 2

你可以试试这个css

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

Answer 3

您可以尝试使用具有较高价值的z-index及其对我有用的

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

jquery timepicker没有在模态窗口中显示

3 个答案: