以下是 Bootstrap 的 ClockPicker 的链接:http://www.jqueryrain.com/?B83aD_dg http://www.jqueryrain.com/?B83aD_dg
它工作完美;但是,当我尝试使用它来填写 Bootstrap 模式弹出窗口中的文本输入时,时钟出现在模式弹出窗口后面。如何让时钟选择器出现在模式弹出窗口中(或前面)?
这是所发生情况的图像:
我尝试将 div 的 z-index 更改为前面;我还尝试更改中每个元素的 z-indexclockpicker.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>
我制造了一个JSFiddle http://jsfiddle.net/pLh5G/用你的代码。
正如我怀疑的那样,问题在于模态的 z 索引高于时钟模态的 z 索引。
为了解决这个问题,你所要做的就是在 CSS 中添加以下内容:
.clockpicker-popover {
z-index: 999999;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)