it-roy-ru.com

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

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

Когда я щелкаю в поле "DatePicker", панель "DatePicker" отображается за элементом "Показ слайдов".

И я поставил сценарий как:

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

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

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

102
rubyist

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

Элемент datepicker получает z-индекс из входных данных, но это работает, только если позиция является относительной.

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

169
Ronye Vernaes

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

153
Aakash Sahai

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

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

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

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

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

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

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

dialog("widget") - это фактический всплывающий указатель даты.

4
marksyzm

У меня есть диалоговое окно, которое использует DatePicker на нем. Это всегда было скрыто. Когда я настраивал 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-индекс поля будет сброшен, чтобы он не перекрывался ни в каких диалоговых окнах, открываемых позже с другим указателем даты.

4
Harry Binnendyk

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

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

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

2
TMNetworks

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

1
LeSage Stark

Вот что решило мою проблему:

 $( document ).ready(function() {   
    $('#datepickerid').datepicker({
     zIndexOffset: 1040 #or any number you want
     });
});
1
limilou

Это случилось со мной, когда я скучал по теме. Убедитесь, что тема существует, или, возможно, переустановите тему и перезагрузите ее на свой сервер.

1
user725913

У меня тоже была эта проблема, так как средство выбора даты использует z-индекс входных данных, я добавил следующий CSS

#dialogID input,.modal-dialog input, .modal-dialog .input-group .form-control{
  z-index:inherit;
}

Просто возьмите правило, которое применяется к вашему, либо по родительскому идентификатору, классу, либо в моем случае диалоговому окну bootstrap, используя их input-group и form-control.

0
Jaynesify

Мне пришлось

.datepicker.dropdown-menu {
    position: relative;
    z-index: 9999 !important;
}
0
iMitwe