jQuery 数据选择器出现在 twitter bootstrap 模态后面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24626526/
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
jQuery datapicker appearing behind twitter bootstrap modal
提问by Baig
I am using Bootstrap v2.3.2 and jQuery Datepickerv1.10.0,
我使用的引导V2.3.2和jQuery日期选择器v1.10.0，
On a modal I am trying to make use of the datepicker and it is appearing behind the modal on Firefox and IE, on Chrome it seems to be working fine.
在模态上，我试图使用日期选择器，它出现在 Firefox 和 IE 上的模态后面，在 Chrome 上它似乎工作正常。
This is what it looks like on IE and Firefox
这就是它在 IE 和 Firefox 上的样子
My Modal HTML
我的模态 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 For datepicker
JS 对于日期选择器
<script>
$(function () {
$("#goalDeadline").datepicker({
changeMonth: true,
changeYear: true,
minDate: +1
});
});
</script>
I have gone through almost every solution I could find on net and stackoverflow but nothing seems to work. I will really appreciate any help here.
我已经经历了几乎所有可以在网络和 stackoverflow 上找到的解决方案，但似乎没有任何效果。我将非常感谢这里的任何帮助。
回答by Matt
This answercovers the issue.
这个答案涵盖了这个问题。
This is a z-indexissue. Normally applying a higher z-indexvia CSS would work, however jQuery resets the CSS each time the Datepicker UI is drawn.
这是一个z-index问题。通常z-index通过 CSS应用更高的值会起作用，但是每次绘制 Datepicker UI 时 jQuery 都会重置 CSS。
The solution re-applies the CSS each time it's drawn by using the beforeShowproperty.
该解决方案在每次使用beforeShow属性绘制时重新应用 CSS 。
回答by Baqer Naqvi
回答by Vidya
As @Matt answered, apply z-indexhigher than modal's z-index, suppose modalhas the below z-index:
正如@Matt 回答的那样，申请z-index高于modal's z-index，假设modal有以下内容z-index：
modal.fade {
z-index: 10000000 !important;
}
Then apply z-index more than modal for datepickerclass:
然后对datepicker类应用 z-index 多于模态：
.datepicker {z-index: 20000000 !important}
