Question

模式选择器窗口后面显示的日期选择器

无论如何尝试，datepicker输入都将显示在模式窗口的背景中。这是通过ajax加载的，该ajax使用相关信息更新了部分视图。

尝试设置z-index：

 #ui-datepicker-div {
    z-index: 9999 !important;
}

还尝试在显示模式窗口后加载datepicker：

  $('#modalPlaceHolder').on('shown.bs.modal', function (e) {
            $('[data-toggle="datepicker"]').datepicker();
        });

Ajax：

 $.ajax({
            url: url,
            type: 'get',
            cache: false,
            data: 'memberId=' + memberId,
            success: function (data) {
                $('#modalPlaceHolder').html(data);
                $('#modalPlaceHolder > .modal').modal('show');
                $('#preloader').delay(350).fadeOut('slow');
            },
            error: function (xhr, ajaxOptions, thrownError) {
                bootbox.alert({
                    message: xhr.status + " || " + thrownError,
                    callback: function () {
                        $('#preloader').delay(350).fadeOut('slow');
                    }
                });
                window.location.reload();
            }
        });

        $('#modalPlaceHolder').on('shown.bs.modal', function (e) {
            $('[data-toggle="datepicker"]').datepicker();
        });

partialview：

 <div class="modal fade" id="edit-member" tabindex="-1" role="dialog" aria-labelledby="editMemberLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="editMemberLabel">@Resources.Global.EditUser</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">×</span>
            </button>
        </div>
 <div class="form-group">
                        <label asp-for="KeyExpiryDateFormatted">@Resources.Global.EndDate</label>
                        <input data-toggle="datepicker" asp-for="KeyExpiryDateFormatted" id="ui-datepicker-div" class="form-control" />
                        <span asp-validation-for="KeyExpiryDateFormatted" class="text-danger"></span>
                    </div>
</div>
</div>

日期选择器显示在模式窗口的后面

0 个答案: