jquery timepicker not showing in modal window

问题

I am new to posting questions, if any mistakes apologies in advance. I am unable to get jquery timepicker to appear in the modal window (it appears behind the window), was wondering if anyone had any suggestions on how to resolve this. This is the link in 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 -->

Thank you in advance. Peter

回答1:

You Can Try with This css

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

回答2:

You can add zindex option when initialize the timepicker. this is my solution

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

https://timepicker.co/options/

回答3:

You can try with large value for z-index and its working for my end

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

来源：https://stackoverflow.com/questions/48455558/jquery-timepicker-not-showing-in-modal-window

标签

jquery

bootstrap-modal