jquery-ui datepicker изменить z-индекс

Question

jquery-ui datepicker изменить z-индекс

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

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

смотрите уродливый круг, охватывающий 6 июля ниже...

enter image description here

грязный способ сделать это (по крайней мере, ИМО) - написать стиль в одной из моих таблиц стилей, но я бы предпочел использовать некоторые 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-индекс перезаписывается каждый раз, когда запускается datepicker.

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

643 6

jQuery javascript css jquery-ui

6 ответов:

Comments

Ничего не найдено.

Fabrício Matté · Accepted Answer · 2017-05-23 15:34:38

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

простой способ переопределить его style ' s z-index С !important правило CSS, как уже упоминалось в еще один ответ. Еще один ответ предполагает задание 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);
    }
});
Скрипка

Я создал отложенный объект функция set z-index виджета, после того, как он будет сброшен jQuery UI, каждый раз, когда вы его вызываете. Это должно удовлетворить ваши потребности.

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

Marek Roj · Accepted Answer · 2013-07-18 18:25:55

есть более элегантный способ сделать это. Добавьте этот CSS:
.date_field {position: relative; z-index:100;}
jQuery установит календарь z-index до 101 (на один больше, чем соответствующий элемент). Элемент position поле должно быть absolute,relative или fixed. jQuery ищет родительский элемент первого элемента, который является абсолютным / относительным / фиксированным, и принимает его'z-index

Emanuele Greco · Accepted Answer · 2015-07-27 13:32:51

вы должны использовать !important предложение, чтобы заставить in-line z-index значение с помощью CSS.
.ui-datepicker{z-index: 99 !important};

David Hicks · Accepted Answer · 2016-07-06 21:34:55

это сработало для меня, когда я пытался использовать 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-индекс" в 1051, потому что z-индекс для модального загрузчика был установлен в 1050.

Loren · Accepted Answer · 2015-02-13 21:54:46

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

чтобы получить 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-индекс для наследования, который должен наследовать от вашего диалогового окна и заставить jQueryUI правильно определить Z-индекс.

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

clinton · Accepted Answer · 2017-07-01 23:06:15

лучший естественный способ-просто поместить элемент выбора даты на" платформу", которая имеет" относительное "положение и имеет более высокий" Z-индекс", чем элемент, который отображается над вашим контролем...