Jquery-ui datepicker change z-index

Проблема довольно проста, хотя мне сложно определить, как ее решить.

Я использую jQuery-ui datepicker вместе с настраиваемым "ios style on/off toggle". Этот переключатель использует некоторые абсолютно позиционированные элементы, которые в настоящее время отображаются поверх моего выбора даты.

см. уродливый круг, покрывающий июль 6-го ниже...

грязный способ сделать это (по крайней мере, imo) - написать стиль в одном из моих таблиц стилей, но я бы скорее использовал некоторый javascript, когда сборщик запустится, чтобы сделать это.

Я уже пробовал

$('.date_field').datepicker(); 
$('.date_field').datepicker("widget").css({"z-index":100});

$('.date_field').datepicker({
    beforeShow: function(input, inst) { 
        inst.dpDiv.css({"z-index":100});
    }
});

но кажется, что z-index получает перезапись при каждом запуске datepicker.

любая помощь приветствуется!

Ответ 1

Ваш JS-код в вопросе не работает, потому что jQuery сбрасывает атрибут style виджета datepicker каждый раз, когда вы его вызываете.

Легкий способ переопределить его style z-index с помощью правила CSS !important, как уже упоминалось в еще один ответ. Еще один ответ предлагает установить position: relative; и z-index на сам элемент ввода, который будет автоматически скопирован в виджет Datepicker.

Но, по просьбе, если по какой-либо причине вам действительно нужно установить ее динамически, добавив на вашу страницу лишний код и обработку, вы можете попробовать следующее:

$('.date_field').datepicker({
    //comment the beforeShow handler if you want to see the ugly overlay
    beforeShow: function() {
        setTimeout(function(){
            $('.ui-datepicker').css('z-index', 99999999999999);
        }, 0);
    }
});

Fiddle

Я создал объект отложенной функции, чтобы установить z-index виджета, после того как он получит reset 'ed пользовательским интерфейсом jQuery каждый раз, когда вы его вызываете. Он должен удовлетворять вашим потребностям.

CSS-хак гораздо менее уродливый IMO, я оставляю место в своем CSS только для jQuery UI tweaks (это прямо над IE6 твиками на моих страницах).

Ответ 2

Существует более элегантный способ сделать это. Добавьте этот CSS:

.date_field {position: relative; z-index:100;}

jQuery установит календарь z-index на 101 (на один больше соответствующего элемента). Поле position должно быть absolute, relative или fixed. jQuery ищет первый родитель элемента, который является абсолютным/относительным/фиксированным, и принимает его 'z-index

Ответ 3

Вам нужно использовать предложение !important, чтобы заставить значение строки z-index использовать CSS.

.ui-datepicker{z-index: 99 !important};

Ответ 4

Это сработало для меня, когда я пытался использовать datepicker в сочетании с модальным bootstrap:

$('input[id^="txtDate"]').datepicker();
$('input[id^="txtDate"]').on('focus', function (e) {
    e.preventDefault();
    $(this).datepicker('show');
    $(this).datepicker('widget').css('z-index', 1051);
});

Конечно, измените селектор, чтобы он соответствовал вашим потребностям. Я установил "z-index" на 1051, потому что для z-индекса для модального бутстрапа было установлено значение 1050.

Ответ 5

Datepicker теперь устанавливает popup z-index на одно больше, чем связанное с ним поле, чтобы держать его перед этим полем, даже если это поле само по себе во всплывающем диалоговом окне. По умолчанию z-index равен 0, поэтому datepicker заканчивается 1. Есть ли случай, когда это неправильно отображает датупиксера? Сообщение JQuery Forum

Чтобы получить z-индекс 100. Вам нужен вход с z-index:99;, а JQueryUI будет обновлять datepicker как z-index:100

<input style="z-index:99;"> или <input class="high-z-index"> и css .high-z-index { z-index: 99; }

Вы также можете указать z-index для наследования, который должен наследовать из вашего диалогового окна, и заставить jQueryUI правильно определить z-index.

<input style="z-index:inherit;"> или <input class="inhert-z-index"> и css .inherit-z-index { z-index: inherit; }

Ответ 6

ЛУЧШИЙ ПРИРОДНЫЙ способ - просто поместить элемент выбора даты на "платформу", которая имеет "относительную" позицию и имеет более высокий "индекс z", чем элемент, который отображается выше вашего элемента управления...