Проблема с z-индексом выбора даты jQuery


106

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

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

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

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

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

Кто-нибудь может мне помочь?


Ответы:


176

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

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

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


8
Проблема в том, что ваш ввод будет отображаться над другими элементами, это редко бывает желаемым эффектом,
Серж Саган

1
Это должно работать, когда datepicker привязан к диапазону ?
rmoestl 06

10
position : relativeнеприемлемо и не работает в моей ситуации. нижеприведенное решение работает нормально.
Kiwy 05

1
это не работает в браузере IE 11. Это конкретный браузер?
Ашвини Маддала

3
Это решение, хотя и работает, подходит не для всех ситуаций. Лучше всего перебросить одну строчку CSS '.ui-datepicker {z-index: 9999! Important;}'
Дэниел Тунг

154

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


Я должен был использовать, datepickerа неui-datepicker
M Smith

JavaScript по-прежнему использует прерывистые z-индексы, произвольные контексты наложения и имеет проблемы с кроссбраузерностью в 2016 году? ActionScript 3 FTW (десять лет назад и по сей день).
Трийнко 03


14

Основываясь на ответе marksyzm, это сработало для меня:

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

1
Но это влияет только на ввод, а не на оверлей datepicker?
marksyzm 08

2
Я использую этот пример jqueryui.com/datepicker, в котором не используется значок для датпикера. С этим решением у меня не было проблем с остальными веб-компонентами.
Лукас,

5

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

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

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

dialog("widget")Является фактическим DatePicker , что всплывает.


1
Эта проблема должна быть решена в сценариях JqueryUI и по умолчанию должна быть настроена на предотвращение наложений. Большинство случаев использования никогда не захотят, чтобы какой-либо ввод перекрывал возможности ввода календаря. Если необходимо, чтобы ввод (или другие элементы) перекрывал календарь, следует использовать подобное решение. Сказав это, @marksyzm будет лучшим решением IMO, поскольку вы примените его только при необходимости.
FrankO

5

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

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

Это решение отлично работает для меня во всплывающем окне. Спасибо !
darkomen 09

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  } ); }                    
            });

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


Это отличное решение и решило мою проблему. Но отредактируйте его немного в части "onClose". Ставлю $(this)вместо $('.ui-datepicker'). Таким образом, он будет установлен z-index:0на «этот вход» вместо всех входов с классом ui-datepicker.
Asuka165,


1

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


1

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


1

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

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

1

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


0

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

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

Просто возьмите правило, которое применяется к вашему, либо по родительскому идентификатору, классу или, в моем случае, диалогу начальной загрузки, используя их группу ввода и контроль формы.


0

Мне пришлось

.datepicker.dropdown-menu {
    position: relative;
    z-index: 9999 !important;
}
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.