jquery-ui датапикер змінити z-індекс


83

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

Я використовую jQuery-ui datepicker разом із виконаним на замовлення перемикачем увімкнення / вимкнення стилю ios. Цей перемикач використовує деякі абсолютно розташовані елементи, які зараз відображаються поверх мого засобу вибору дати.

дивіться потворне коло, що охоплює 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-індекс перезаписується кожного разу, коли запускається програма вибору дати.

будь-яка допомога вітається!


3
Я вважаю важливим правило css! На css вашої сторінки набагато чистішим, ніж javascript, оскільки z-index є властивістю CSS і є для стилізації. Якби мені довелося робити рішення JS, це було б додаванням styleтегу до голови - не тільки наявність його в CSS робить ваш код JS коротшим і чистішим, але і застосовується до всіх випадків вибору дати.
Fabrício Matté

1
Можливий дублікат stackoverflow.com/questions/715677/…
Lance

@Lance не дурень, бо я запитую, як це можна зробити динамічно, не додаючи рядок до css
Greg Guida

@ FabrícioMatté Напевно, я просто не хочу обмикати свій css якось дурним перевизначенням для jquery-ui edge-case. styleТег в голові трохи ближче до того , що їм шукає , але то , що я дійсно хочу зробити , це змінити атрибут стилю на елементі дата-підбирача.
Greg Guida

Я вже зарезервував місце внизу файлу CSS лише для злому інтерфейсу jQuery в кожному запущеному проекті, але так, я подав відповідь із чистим рішенням jQuery, пояснюючи, чому CSS буде чистішим рішенням, тепер ви можете вибрати, який саме використовувати. =]
Fabrício Matté

Відповіді:


142

Ваш код 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);
    }
});

Скрипка

Я створив відкладений об'єкт функції для встановлення z-indexвіджета, після того, як його буде скинуто користувальницьким інтерфейсом jQuery, кожного разу, коли ви його викликаєте. Це повинно вистачати вашим потребам.

Взлом CSS - це набагато менш потворне IMO, я залишаю місце в своєму CSS лише для налаштувань інтерфейсу jQuery (це прямо над налаштуваннями IE6 на моїх сторінках).


5
Чи можу я просто сказати вам, скільки ви качаєте !? Спочатку спробував безліч інших речей. Дякую!
Bretticus

спасибі за вашу відповідь, він працює, однак, як тільки оновлення дати оновлено (наприклад, ви змінюєте місяць), z-індекс встановлюється за замовчуванням, тому я думаю, що для цієї відповіді потрібно буде невелике коригування, тобто додати наступне onChangeMonthYear: function () {setTimeout (function () {$ ('. ui-datepicker'). css ('z-index', 99999999999999);}, 0); }
Гомбо

@Gombo Я вважаю, що простіше, якщо ти використовуєш один із підходів CSS (описаний вище підхід JS), оскільки вони набагато менш хакі. ;)
Fabrício Matté

Принаймні у FF, максимальна кількість становить 10 цифр, тому дев'ять 9 можуть бути кращими (хоча FF із задоволенням перетворить на 2147483647 без помилки).
Кемпбелн 03.03.15

+1 за вказівку встановити z-indexна вхідний DOM. Це єдине, що в мене спрацювало:<input .... style="z-index: 9999;"/>
Себастьян

88

Є більш елегантний спосіб це зробити. Додайте цей CSS:

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

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


2
Це, безумовно, найкраще рішення. +1
Пол Чемберлен

Працював як оберіг! Дякую
брандо,

Ідеально, але в моєму випадку: .datepicker-dropdown {z-index: 999999!
Important

Майже ідеально, але це не спрацьовує, якщо ви не знаєте максимального значення zindex, для якого ви хочете, щоб нав'язувач дати себе
MFAL

21

Вам потрібно використовувати !importantречення, щоб примусити вбудоване z-indexзначення за допомогою CSS.

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

Вибачте, у мене не виходить - z-індекс встановлюється для елемента jQuery, який має вищий пріоритет, ніж! Важливий
Ділан Гамільтон-Фостер

1
@ DylanHamilton-Foster ти впевнений? Чи можете ви, будь ласка, додати якийсь інший тег, тобто BackgroundColor, щоб перевірити, чи застосовується стиль насправді?
Емануеле Греко

7

Це спрацювало для мене, коли я намагався використовувати datepicker спільно з модальним завантажувальним файлом:

$('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 тепер встановлює спливаючий z-індекс на одне більше, ніж пов'язане поле, щоб тримати його перед цим полем, навіть якщо це поле знаходиться у діалоговому вікні. За замовчуванням z-індекс дорівнює 0, тому datepicker закінчується з 1. Чи є випадок, коли це не відображає datepicker належним чином? Повідомлення на форумі JQuery

Щоб отримати z-індекс 100. Вам потрібно ввести за допомогою, z-index:99;і JQueryUI оновить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; }


1

НАЙКРАЩИЙ ПРИРОДНИЙ спосіб - це просто розмістити елемент вибору дати на "платформі", яка має "відносне" положення і має вищий "z-індекс", ніж елемент, який відображається над вашим контролем ...


4
Будь ласка, додайте значущий код і опишіть більше свогоBEST NATURAL way
Пітер

1

У моєму випадку нічого не вийшло. Мені потрібно було додати z-індекс до типу введення, який має датчик.

<input type="text" class="datepicker form-control" datatype="date" style="z-index: 10000;" id="txtModalDate">

0

Це для Bootstrap datetimepicker

Якщо ваш файл вибору дат ховається через прокрутку, з'являється у вашому використанні div:

overflow-x: visible !important;
overflow-y: visible !important;

в css цілого div, який містить ваш датчик та інші елементи, такі як

.dialogModel{
    overflow-x: visible !important;
    overflow-y: visible !important;
}
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.