web-dev-qa-db-ja.com

Twitterの背後に表示されるjQuerydatepicker bootstrap modal

Bootstrap v2.3.2およびjQuery Datepicker v1.10.0、

モーダルでは、日付ピッカーを利用しようとしていますが、FirefoxとIEのモーダルの後ろに表示されています。Chromeでは正常に機能しているようです。

これはIEとFirefoxでどのように見えるかです

enter image description here

私のモーダル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 datepickerの場合

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

私はネットとスタックオーバーフローで見つけることができるほぼすべての解決策を試しましたが、何も機能していないようです。ここで助けていただければ幸いです。

jqueryjquery-uitwitter-bootstrapdatepickerbootstrap-modal
8
Baig

この回答が問題をカバーしています。

これはz-indexの問題です。通常、CSSを介してより高いz-indexを適用することは機能しますが、jQueryはDatepickerUIが描画されるたびにCSSをリセットします。

このソリューションは、beforeShowプロパティを使用して描画されるたびにCSSを再適用します。

22
Matt

私は同じ問題に直面し、それを修正しました。

.datepicker{z-index:9999 !important}

Ref： github

11
Baqer Naqvi