我正在使用Bootstrap v2.3.2和jQuery
Datepicker v1.10.0,
在一个模态我试图利用日期选择器,它出现在Firefox和IE上的模态背后,在Chrome上似乎工作正常.
这就是它在IE和Firefox上的样子
我的模态HTML
<div id="editGoals" class="modal hide fade" data-keyboard="false" data-backdrop="static"> <div class="modal-header"> <a type="button" class="close" data-dismiss="modal" aria-hidden="true">×</a> <h3 style="font-size: 18px;" id="myModalLabel"><img src="assets/img/logo_icon.png">Goal Tracker</h3> </div> <div class="modal-body"> <div id="message2"></div> <form action="dashboard-goals-ajax.PHP" method="post" name="goaldataform" id="goaldataform" class="form-horizontal goaldataform"> <div class="control-group"> <label class="control-label goal_label_text"><?PHP _e('Goal Target'); ?> </label> <div class="controls"> <div class="input-prepend input-append"> <span class="add-on">$</span><input type="text" class="input-medium" name="goal_target" id="goal_target" value=""> </div> </div> </div> <div class="control-group"> <label class="control-label goal_label_text"><?PHP _e('How much have you saved towards your goal?'); ?> </label> <div class="controls"> <div class="input-prepend input-append"> <span class="add-on">$</span><input type="text" class="input-medium" name="goal_progress" id="goal_progress" value=""> </div> </div> </div> <div class="control-group"> <label class="control-label goal_label_text"><?PHP _e('Goal deadline'); ?> </label> <div class="controls"> <div class="input-prepend input-append"> <span class="add-on"></span><input class="input-medium" type="text" id="goalDeadline" name="goalDeadline"> </div> </div> </div> <input type="hidden" name="goal_type" id="goal_type" value=""/> <input type="hidden" name="goal_target_submitted"> </form> </div> <div class="modal-footer"> <button data-complete-text="Close" class="dt-btn btn-yellow dt-btn-1 pull-right" id="goaldatasubmit" name="goaldatasubmit"><?PHP _e('Submit'); ?></button> <div class="gap-10"></div> </div> </div>
JS对于datepicker
<script> $(function () { $("#goalDeadline").datepicker({ changeMonth: true,changeYear: true,minDate: +1 }); }); </script>
我已经完成了几乎我能在网络和stackoverflow上找到的所有解决方案,但似乎没有任何工作.我真的很感激这里的任何帮助.
解决方法
This answer涵盖了这个问题.
这是一个z索引问题.通常通过CSS应用更高的z-index会起作用,但是每次绘制Datepicker UI时jQuery都会重置CSS.