J-запрос даты выбора z-index выпуска

Question

У меня есть div слайд-шоу, и у меня есть поле выбора даты над этим div.

Когда я щелкаю в поле выбора даты, панель выбора даты отображается позади элемента слайд-шоу.

И я поставил скрипт как:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js

Таким образом, я не могу изменить z-индекс указателя даты в CSS. Z-индекс DatePicker, который генерирует скрипт, равен 1, а мой div для слайд-шоу (также вызывающий googleajaxapi) z-index - 5. Так что, я думаю, мне нужно увеличить z-индекс средства выбора даты больше 5. Так что есть любой способ увеличить это?

Кто-то может мне помочь?

Answer 1

Поместите следующий стиль в элемент ввода 'input': position: relative; z-index: 100000;.

Datepicker div берет z-index из входных данных, но это работает, только если позиция относительна.

Используя этот способ, вам не нужно изменять никакой javascript из пользовательского интерфейса jQuery.

Answer 2

просто в вашем CSS используйте '.ui-datepicker{ z-index: 9999 !important;}' Здесь 9999 можно заменить на любое значение слоя, которое вы хотите, чтобы ваш указатель даты был доступен.Ни один код не должен быть закомментирован, ни добавление 'position:relative;' css к элементам ввода.Поскольку увеличение z-индекса элементов ввода будет влиять на все кнопки типов ввода, что в некоторых случаях может не потребоваться.

Answer 3

работал для меня

.hasDatepicker {
    position: relative;
    z-index: 9999;
}

Answer 4

Судя по марксизму ответа, у меня получилось:

$('input').datepicker({
    beforeShow:function(input) {
        $(input).css({
            "position": "relative",
            "z-index": 999999
        });
    }
});

Answer 5

У меня есть диалоговое окно, в котором используется указатель даты. Это всегда было скрыто. Когда я настраивал z-index, поле в нижней форме всегда отображалось в диалоге.

Я использовал комбинацию решений, которые видел, чтобы решить проблему.

$('.ui-datepicker', $form).datepicker({
                showButtonPanel: true,
                changeMonth: true,
                changeYear: true,
                dateFormat: "yy-M-dd",
                beforeShow: function (input) {
                    $(input).css({
                        "position": "relative",
                        "z-index": 999999
                    });
                },
                onClose: function () { $('.ui-datepicker').css({ 'z-index': 0  } ); }                    
            });

Показ перед началом гарантирует, что при выборе даты средство выбора всегда находится сверху, но onClose гарантирует, что z-индекс поля будет сброшен, чтобы он не перекрывался ни в каких диалоговых окнах, открываемых позже с другим средством выбора даты.

Answer 6

У меня была эта проблема, которую я решил, используя при клике:

var checkin = $('.dpd1').datepicker()
.on('click', function (ev) {
        $('.datepicker').css("z-index", "999999999");
}).data('datepicker');

Answer 7

В добавление к ответу Джастина, если вы беспокоитесь о неопрятной разметке или не хотите, чтобы это значение было жестко задано в CSS, вы можете установить ввод перед его отображением.Примерно так:

$('input').datepicker({
    beforeShow:function(input){
        $(input).dialog("widget").css({
            "position": "relative",
            "z-index": 20
        });
    }
});

Обратите внимание, что вы не можете опустить правило "position": "relative", так как плагин выглядит как встроенный стиль для обоих правил или таблицы стилей, но не для обоих .

dialog("widget") - это фактическое всплывающее окно выбора даты.

Answer 8

У меня есть страница, на которой указатель даты находился над кнопкой datatables.net tabletools.Кнопки datatables имели более высокий z-индекс, чем отдельные кнопки даты выбора даты.Благодаря ответу Рони, я смог решить эту проблему, используя position: относительный;и z-index: 10000. Спасибо!

Answer 9

Смотрите здесь: http://forum.jquery.com/topic/z-index-1-datepicker-1-8

Answer 10

На самом деле вы можете эффективно добавить в свой CSS .ui-datepicker{ z-index: 9999 !important;}, но вы можете изменить jquery-ui.css или jquery-ui.min.css и добавить в конце класса пользовательского интерфейса z-index: 9999 !important;.обе вещи работают на меня (вам нужен только один; -))