jQuery datepicker 出现在 twitter 引导模式后面

Posted 2023-05-07

【中文标题】jQuery datepicker 出现在 twitter 引导模式后面

【英文标题】：jQuery datapicker appearing behind twitter bootstrap modal

【发布时间】：2014-08-28 21:01:30

【问题描述】：

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

在一个模式上，我正在尝试使用 datepicker，它出现在 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">&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>

我已经完成了几乎所有在 net 和 *** 上可以找到的解决方案，但似乎没有任何效果。我将非常感谢这里的任何帮助。

【问题讨论】：

查看this answer

@Matt 十亿多亏了你。它有效，您想将此添加为答案，以便我可以标记它。再次感谢

当然可以。很高兴它为您解决了。

【参考方案1】：

This answer 涵盖了这个问题。

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

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

【讨论】：

纯 CSS 工作正常：.ui-datepicker position: relative; z-index: 10000 !important;

@Matt，你能帮我解决我在使用时间选择器时遇到的类似问题吗***.com/questions/51654736/…

【参考方案2】：

我遇到了同样的问题，解决了；

.datepickerz-index:9999 !important

参考：github

【参考方案3】：

正如@Matt 回答的那样，应用z-index 高于modal 的z-index，假设modal 具有以下z-index：

modal.fade 
    z-index: 10000000 !important;

然后为datepicker类应用z-index而不是模态：

.datepicker z-index: 20000000 !important