jQuery datapicker出现在twitter引导模态后面 [英] jQuery datapicker appearing behind twitter bootstrap modal

问题描述

我正在使用Bootstrap v2.3.2和jQuery Datepicker v1.10.0，

I am using Bootstrap v2.3.2 and jQuery Datepicker v1.10.0,

在一种模式下，我试图利用datepicker，它出现在Firefox和IE的模式后面，在Chrome上似乎运行良好.

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.

这是在IE和Firefox上的外观

This is what it looks like on IE and 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">&times;</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用于日期选择器

<script>
    $(function () {
        $("#goalDeadline").datepicker({
            changeMonth: true,
            changeYear: true,
            minDate: +1
        });
    });
</script>

我已经经历了几乎所有在网络和stackoverflow上都能找到的解决方案，但似乎没有任何效果.非常感谢您的帮助.

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.

推荐答案

这个答案 涵盖了该问题.

This answer covers the issue.

这是一个z-index问题.通常可以通过CSS应用更高的z-index，但是每次绘制Datepicker UI时jQuery都会重置CSS.

This is a z-index issue. Normally applying a higher z-index via CSS would work, however jQuery resets the CSS each time the Datepicker UI is drawn.

该解决方案每次使用beforeShow属性绘制时都会重新应用CSS.

The solution re-applies the CSS each time it's drawn by using the beforeShow property.

这篇关于jQuery datapicker出现在twitter引导模态后面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！