如何让 Bootstrap（插件）的 ClockPicker 出现在 Bootstrap 模态弹出窗体中？答案

【问题标题】：How to get ClockPicker for Bootstrap (Plugin) to appear in a Bootstrap Modal pop up form?如何让 Bootstrap（插件）的 ClockPicker 出现在 Bootstrap 模态弹出窗体中？
【发布时间】：2014-07-20 14:00:24
【问题描述】：

这里是用于 Bootstrap 的 ClockPicker 的链接：http://www.jqueryrain.com/?B83aD_dg

完美运行；但是，当我尝试使用它在 Bootstrap 模式弹出窗口中填充文本输入时，时钟出现在模式弹出窗口的后面。我怎样才能让时钟选择器出现在模式弹出窗口中（或前面）？

这是发生了什么的图片：

我尝试将 div 的 z-index 更改为在前面；我还尝试将clockpicker.css 中每个元素的 z-index 更改为在前面（例如：z-index: 1120）。然而，这一切只是让时钟消失。

<div class="modal fade appointment-modal"
     id="appointment-modal"
     tabindex="-1"
     role="dialog"
     aria-labelledby="myModalLabel"
     aria-hidden="true">

<div class="modal-dialog tutors-modal">
    <div class="modal-content tutors-modal">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">Appointment Scheduler</h4>
        </div>
        <div class="modal-body" style="height: 575px; left: 2.5%;">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">     
                        <div class="alert alert-danger"><span class="glyphicon glyphicon-alert"></span>
                            <form role="form" action="/portal/make-appointment/" method="post" id="appointment_form" class="form-horizontal">
                                <div class="col-lg-6">

                                    <div class="input-group clockpicker" id = "clockpicker" style="padding: 6px; padding-bottom: 20px;">
                                        <input type="text" class="form-control" id = "time" name="time" value="08:00">
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-time"></span>
                                        </span>
                                    </div>
                                    <script type="text/javascript">
                                        var input = $('#time');
                                        input.clockpicker({
                                            autoclose: true
                                        });
                                    </script>
                                    <input type="submit" name="submit" id="submit" value="Schedule Appointment" class="btn btn-info pull-right">
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
        </div>
    </div>
</div>

【问题讨论】：

编辑了我的帖子，它现在有我正在使用的代码。 clockpicker.js 和 clockpicker.css 也被加载到 .html 页面中。我还添加了所发生情况的屏幕截图。

标签： jquery twitter-bootstrap datetime jquery-plugins time-select

【解决方案1】：

我用你的代码创建了JSFiddle。

我怀疑问题在于模态的 z-index 高于时钟模态的 z-index。

要解决此问题，您只需在 CSS 中添加：

.clockpicker-popover {
    z-index: 999999;
}

【讨论】：

【解决方案2】：

只需将此样式添加到您的时钟选择器

.clockpicker-popover 
{
   z-index: 999999 !important;
}

【讨论】：

【解决方案3】：

我只用这个解决了这个问题

.popover {
     z-index: 215000000 !important;
 }

【讨论】：

【解决方案4】：

只需对样式表进行排序以覆盖元素：

第一个 JQuery
然后是时钟选择器
最后是 Bootstrap

例子：

<!-- jQuery -->
<script src="../librerias/jquery/jquery-3.4.1.min.js"></script>

<!-- Clockpicker -->
<link rel="stylesheet" type="text/css" href="../librerias/clockpicker/css/jquery-clockpicker.min.css">
<script type="text/javascript" src="../librerias/clockpicker/js/jquery-clockpicker.min.js"></script>

<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="../librerias/bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="../librerias/bootstrap/css/bootstrap.min.css">
<script src="../librerias/bootstrap/js/bootstrap.min.js"></script>

【讨论】：