JQuery-UI DatePicker изменить Z-индекс

63

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

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

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

Изображение 651

грязный способ сделать это (по крайней мере, 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.

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

  • 3
    Я считаю, что css! Важные правила для css вашей страницы намного чище, чем javascript, поскольку z-index является свойством CSS и предназначен для стилизации. Если бы мне пришлось делать решение JS, оно добавляло бы тег style к голове - не только наличие его в CSS делает ваш код JS короче и чище, но и беспрепятственно применимо для всех экземпляров DatePicker.
  • 1
    Возможный дубликат stackoverflow.com/questions/715677/…
Показать ещё 4 комментария
Теги:
datepicker

6 ответов

113
Лучший ответ

Ваш 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 твиками на моих страницах).

Поделиться
  • 5
    Могу ли я просто сказать вам, сколько вы рок !? Сначала попробовал множество других вещей. Спасибо!
  • 0
    спасибо за ваш ответ, он работает, однако, как только указатель даты обновляется (например, вы меняете месяц), z-index возвращается к значению по умолчанию, поэтому я думаю, что для этого ответа потребуется небольшая корректировка, то есть добавить следующее onChangeMonthYear: function () {setTimeout (function () {$ ('. ui-datepicker'). css ('z-index', 99999999999999);}, 0); }
Показать ещё 5 комментариев
70

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

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

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

Поделиться
  • 2
    Эта работа отлично, вы гений.
  • 1
    +1 .. Это идеальное решение
Показать ещё 6 комментариев
13

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

.ui-datepicker{z-index: 99 !important};
Поделиться
  • 0
    Извините, у меня не работает - z-индекс установлен для элемента jQuery, который имеет более высокий приоритет, чем! Важный
  • 0
    @ DylanHamilton-Фостер, ты уверен? Можете ли вы добавить какой-либо другой тег, например BackgroundColor, чтобы увидеть, применяется ли стиль на самом деле?
3

Это сработало для меня, когда я пытался использовать 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.

Поделиться
2

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

Поделиться
0

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

Поделиться
  • 3
    Пожалуйста, добавьте осмысленный код и опишите больше вашего BEST NATURAL way

Ещё вопросы

Сообщество Overcoder
Наверх
Меню