Question

我有一个带有日期选择器的模态引导窗口，该窗口显示在模态窗口下而不是在前面，以便选择日期。模式是：

<div id="DateDiv" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4class="modal-title"></h4>
            </div>
            <div class="modal-body">

                <!-- Date Pickers-->
                <div class="form-group">
                    <label class="col-md-4 control-label" for="DateFrom"></label>
                    <div class="col-md-5">
                        <input class="form-control span2" type="text" id="DateFrom" name="DateFrom" value="" >
                    </div>
                </div>

            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
                <a class="btn btn-primary" id="buttonFechasSeleccionadas" role="button" onclick="SelectedDates(this); return false;">Buscar</a>
            </div>

            </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

我的javascript是：

$(document).ready(function () {
    var nowTemp = new Date();
    var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);

    // Date Picker DateFrom
    $('#DateFrom').datepicker({
        onRender: function (date) {
            return date.valueOf() > now.valueOf() ? 'disabled' : '';
        }
    }).on('changeDate', function (ev) {

    }).data('datepicker');


});

有一个输入文字显示选择时的模态：

$('#InputText').on("focus", function () {
                    $('#DateDiv').modal('show');
                });

问题在于，当输入文本时，输入文本＆＃39;单击，模态实际显示，但点击日期字段＆＃39; DateFrom＆＃39;日历显示为灰色，并在模态窗口下禁用。

请问??? ???

Answer 1

我最终通过添加具有高z-index和重要性

的样式来解决

<style type="text/css">
        #ui-datepicker-div {
            z-index: 9999 !important; /* must be > than popup window */
        }    
</style>

模态Bootstrap中的DatePicker显示在模态窗口下但不是UPFRONT

1 个答案: