jQuery 数据选择器出现在 twitter bootstrap 模态后面 [英] jQuery datapicker appearing behind twitter bootstrap modal

问题描述

我正在使用 Bootstrap v2.3.2 和 jQuery 涵盖了这个问题.

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

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

I am using Bootstrap v2.3.2 and jQuery Datepicker 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.

This is what it looks like on IE and Firefox

My Modal 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 For datepicker

<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.

解决方案

This answer covers the issue.

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.

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

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