twitter-bootstrap 如何让 ClockPicker for Bootstrap (Plugin) 出现在 Bootstrap Modal 弹出表单中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23960866/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get ClockPicker for Bootstrap (Plugin) to appear in a Bootstrap Modal pop up form?
提问by Grace
Here is the link to ClockPicker for Bootstrap: http://www.jqueryrain.com/?B83aD_dg
这是 Bootstrap 的 ClockPicker 的链接：http://www.jqueryrain.com/?B83aD_dg
It works perfectly; however, when I try to use it to fill in a text-input in a Bootstrap modal pop up, the clock appears behind the modal pop up. How can I get the clock picker to appear in (or in front of) the modal pop up instead?
它完美地工作；但是，当我尝试使用它来填充 Bootstrap 模态弹出窗口中的文本输入时，时钟出现在模态弹出窗口的后面。如何让时钟选择器出现在模式弹出窗口中（或前面）？
Here is an image of what happens:
这是发生的事情的图像：
I've tried changing the z-index of the div to be in front; I've also tried changing the z-index of every element in clockpicker.cssto be in front (for example: z-index: 1120). However, all this does is make the clock disappear.
我尝试将 div 的 z-index 更改为前面；我还尝试将每个元素的 z-index 更改为clockpicker.css前面（例如：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">×</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>
回答by Catalin MUNTEANU
I made a JSFiddlewith your code.
我用你的代码做了一个JSFiddle。
As I suspected the problem is that the z-index of the modal is higher than the z-index of the clock-modal.
正如我怀疑的那样，问题在于模态的 z-index 高于时钟模态的 z-index。
All you have to do in order to fix this is add this in your CSS:
为了解决这个问题，你所要做的就是在你的 CSS 中添加这个：
.clockpicker-popover {
z-index: 999999;
}
回答by pankaj kumar
I solved this problem using this only
我只用这个解决了这个问题
.popover {
z-index: 215000000 !important;
}
回答by Mahmaood ali
just add this style to your clockpicker
只需将此样式添加到您的时钟选择器
.clockpicker-popover
{
z-index: 999999 !important;
}
回答by Miguel
Just sort the style sheets to overlay the elements:
只需对样式表进行排序以覆盖元素：
- First JQuery
- Then Clockpicker
- And finally Bootstrap
- 第一个 JQuery
- 然后时钟选择器
- 最后引导程序
Example:
例子：
<!-- 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>
